Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко.
Google font Open Sans
//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
Google font Roboto
//Добавляем к body или к нужному элементу font-family: 'Roboto', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
Google font Ubuntu
//Добавляем к body или к нужному элементу font-family: 'Ubuntu', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
Google font Montserrat
//Добавляем к body или к нужному элементу font-family: 'Montserrat', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
Google font Cuprum
//Добавляем к body или к нужному элементу font-family: 'Cuprum', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');
Подключить несколько шрифтов можно так:
//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap');
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…
Font Optimization
next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.
�� Watch: Learn more about how to use next/font → YouTube (6 minutes)
.
next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.
This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.
Google Fonts
Automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. No requests are sent to Google by the browser.
Get started by importing the font you would like to use from next/font/google as a function. We recommend using variable fonts
for the best performance and flexibility.
To use the font in all your pages, add it to _app.js file under /pages as shown below:
pages/_app.js
import from 'next/font/google' // If loading a variable font, you don't need to specify the font weight const inter = Inter(< subsets: ['latin'] >) export default function MyApp(< Component, pageProps >) return ( main className=inter.className>> Component . pageProps> /> main> ) >If you can’t use a variable font, you will need to specify a weight:
pages/_app.js
import from 'next/font/google' const roboto = Roboto( weight: '400', subsets: ['latin'], >) export default function MyApp(< Component, pageProps >) return ( main className=roboto.className>> Component . pageProps> /> main> ) >You can specify multiple weights and/or styles by using an array:
app/layout.js
const roboto = Roboto( weight: ['400', '700'], style: ['normal', 'italic'], subsets: ['latin'], display: 'swap', >)Good to know: Use an underscore (_) for font names with multiple words. E.g. Roboto Mono should be imported as Roboto_Mono .
Apply the font in
You can also use the font without a wrapper and className by injecting it inside the as follows:
pages/_app.js
import from 'next/font/google' const inter = Inter(< subsets: ['latin'] >) export default function MyApp(< Component, pageProps >) return ( <> style jsx global>` html font-family: $inter.style.fontFamily>; > `>style> Component . pageProps> /> ) >Single page usage
To use the font on a single page, add it to the specific page as shown below:
pages/index.js
import from 'next/font/google' const inter = Inter(< subsets: ['latin'] >) export default function Home() return ( div className=inter.className>> p>Hello Worldp> div> ) >Specifying a subset
Google Fonts are automatically subset
. This reduces the size of the font file and improves performance. You’ll need to define which of these subsets you want to preload. Failing to specify any subsets while preload is true will result in a warning.
This can be done by adding it to the function call:
How can I use Google’s Roboto font on a website?
I want to use Google’s Roboto font on my website and I am following this tutorial: http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 I have downloaded the file which has a folder structure like this: Now I have three questions:
- I have css in my media/css/main.css url. So where do I need to put that folder?
- Do I need to extract all eot,svg etc from all sub folder and put in fonts folder?
- Do I need to create css file fonts.css and include in my base template file?
The example he uses this
@font-face
What should my url look like, if I want to have the dir structure like:
8,154 8 8 gold badges 49 49 silver badges 62 62 bronze badges
asked Aug 12, 2013 at 2:39
4,037 5 5 gold badges 23 23 silver badges 22 22 bronze badges
14 Answers 14
You don’t really need to do any of this.
- Go to Google’s Web Fonts page
- search for Roboto in the search box at the top right
- Select the variants of the font you want to use
- click ‘Select This Font’ at the top and choose the weights and character sets you need.
The page will give you a element to include in your pages, and a list of sample font-family rules to use in your CSS.
Using Google’s fonts this way guarantees availability, and reduces bandwidth to your own server.
14.9k 27 27 gold badges 134 134 silver badges 193 193 bronze badges
answered Aug 12, 2013 at 2:52
user1864610 user1864610
Thanks for that, that was perfect. Do u know which setting google use for their playlist foonts in google play store. i want to have style exactly like that. Also i did not find the link or code snippet in the link. i do see the fonts there but no code
Aug 12, 2013 at 3:11
Cool thing, they provide an @import for LESS files too! However, testing w/o internet connection OR Google connection issues (e.g.: China) = NO Fonts. I also noticed that there is no Roboto Black (Roboto Bk) font-family : they actually only use 3 font families (Roboto, Roboto Condensed and Roboto Slab) all other Roboto variants are made through font-style and font-weight CSS changes. So ideally, after placing the Google check if the fonts are really there. If not, use your own (btw loading all files from one font family normally does not exceed 0.5MB).
Aug 12, 2013 at 5:47
Aug 14, 2013 at 6:54
-1 for Using Google’s fonts this way guaranties availability . Nothing «guaranties availability,» much less Google fonts. I happen to be one of billion+ people for whom using Google’s CDN means tons of websites fail to load properly, or at all. I’m not telling anyone what to do, but don’t think Google’s CDN is a perfect solution.
Dec 29, 2016 at 12:39
-1. As @Nateowami mentioned, you’re relying on Google’s servers (which might be blocked in certain countries), it’s bad for privacy, and performance could actually be better if you host your fonts on a CDN yourself. It’s more work but that’s your job, isn’t it?
May 10, 2019 at 7:16
There are TWO approaches that you can take to use licensed web-fonts on your pages:
1. Font Hosting Services like Typekit, Fonts.com, Fontdeck, etc.
These services provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font. Google even provides this service for free (here is an example for the Roboto font you requested).
JS font loaders like the one used by Google and Typekit (i.e. WebFont loader) provide CSS classes and callbacks to help manage the FOUT that may occur, or response timeouts when downloading the font.
body 2. The DIY approach
This involves getting a font licensed for web use, and (optionally) using a tool like FontSquirrel’s generator (or some software) to optimize its file size. Then, a cross-browser implementation of the standard @font-face CSS property is used to enable the font(s).
This approach can provide better load performance since you have a more granular control over the characters to include and hence the file-size.
/* get the required local files */ @font-face < font-family: 'Roboto'; src: url('roboto.eot'); /* IE9 Compat Modes */ src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('roboto.woff') format('woff'), /* Modern Browsers */ url('roboto.ttf') format('truetype'), /* Safari, Android, iOS */ url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */ >/* use the font */ body
TLDR;
There are two major approches to embed custom fonts on your website. Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.
UPDATE
Roboto: Google’s signature font is now open source. You can now manually generate the Roboto fonts using instructions that can be found here.
26.9k 10 10 gold badges 96 96 silver badges 166 166 bronze badges
answered Jun 17, 2014 at 22:32
3,499 1 1 gold badge 27 27 silver badges 44 44 bronze badges
Can you please explain how to choose a specific font from the Roboto suite in case you’ve chosen to have several of them?. Because it seems that the same CSS attribute goes for all of them: font-family: ‘Roboto’, sans-serif;
Feb 25, 2022 at 8:02
Old post, I know.
This is also possible using CSS @import url :
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900); html, body, html *
121 2 2 silver badges 6 6 bronze badges
answered Jun 13, 2016 at 9:57
rocksteady rocksteady
2,360 5 5 gold badges 24 24 silver badges 41 41 bronze badges
Your solution is a performance anti-pattern. Using a link tag in your markup results in sooner download of Google’s CSS file compared to @import; the browser just discovers the resource reference earlier in general and in particular due to the pre-loader (while parsing the HTML vs. first parse the HTML, then discover your CSS file, then download it, then parse and discover the @import, then download the imported stylesheet).
Nov 10, 2016 at 12:25
Not necessarily. Using Webpack and plugins, this will all be embedded in your distribution build.
Aug 18, 2017 at 11:01
Add display=swap
Oct 3, 2020 at 8:07
With css:
@font-face < font-family: 'Roboto'; src: url('../font/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; >/* etc, etc. */ With sass:
@font-face font-family: 'Roboto' src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype') font-weight: normal font-style: normal @font-face font-family: 'Roboto' src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype') font-weight: bold font-style: normal @font-face font-family: 'Roboto' src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype') font-weight: normal font-style: italic @font-face font-family: 'Roboto' src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype') font-weight: bold font-style: italic @font-face font-family: 'Roboto' src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype') font-weight: 300 font-style: normal @font-face font-family: 'Roboto' src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype') font-weight: 300 font-style: italic @font-face font-family: 'Roboto' src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype') font-weight: 500 font-style: normal @font-face font-family: 'Roboto' src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype') font-weight: 500 font-style: italic /* Roboto-Regular.ttf 400 */ /* Roboto-Bold.ttf 700 */ /* Roboto-Italic.ttf 400 */ /* Roboto-BoldItalic.ttf 700 */ /* Roboto-Medium.ttf 500 */ /* Roboto-MediumItalic.ttf 500 */ /* Roboto-Light.ttf 300 */ /* Roboto-LightItalic.ttf 300 */ /* https://fonts.google.com/specimen/Roboto#standard-styles */
answered Jul 25, 2020 at 4:39
8,676 5 5 gold badges 36 36 silver badges 55 55 bronze badges
For Website you can use ‘Roboto’ font as below:
If you have created separate css file then put below line at the top of css file as:
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i'); Or if you don’t want to create separate file then add above line in between
:
Saved searches
Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
This repository has been archived by the owner on Mar 6, 2020. It is now read-only.
tailwindlabs / discuss Public archive
Font styles and variants — how to work with them? #375
nezaboravi opened this issue Nov 9, 2019 · 4 comments
Font styles and variants — how to work with them? #375
nezaboravi opened this issue Nov 9, 2019 · 4 comments
Comments
nezaboravi commented Nov 9, 2019
Hello again, i have a a new question.
Not truly understand font families and how all that works.
What i must achieve is that on a page i have to use Roboto font.
But somewhere its Roboto Light, Somewhere is Roboto Regular,, then somwhere Roboto Light regular etc..
What i manage to do is to extend default Theme and to ad Roboto as a default first font.
So on my page i get Roboto, but i need Roboto Light, Roboto regular, Roboto bold, regular light etc..
How can i achieve that?
Here is preview from InVision board.
The text was updated successfully, but these errors were encountered:
danwritecode commented Nov 11, 2019
I’m having the same exact issue and this answer is not clear to me.
- Where am I importing these fonts?
- Why can’t I extend Roboto in the tailwind config as described in the docs to achieve this?
- Will I be able to use the standard utility classes (font-light, font-normal, etc)?
- Why is it that the utility classes like font-thin do nothing to the font weight with the default fonts?
I know I’m pointing out a bunch of things, just trying to give feedback on this from the perspective of a new user of Tailwind. This has been my biggest (only) frustration thus far.
nezaboravi commented Nov 11, 2019 •
@nelsynelz here is how i implemented it:
In my tailwind.config.js at top of file:
const defaultTheme = require('tailwindcss/defaultTheme'); Later bellow in file, i am extending theme:
theme: < extend: < fontFamily: < roboto: ["Roboto", . defaultTheme.fontFamily.sans] >, That is pushing Roboto at first place to be used.
I am giving key name ‘roboto’ as you can see above.
In _tailwind.scss file:
@tailwind base; @tailwind components; @tailwind utilities; @font-face < font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2'); >@font-face < font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); >@font-face < font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); >@font-face < font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2'); >Then in my code:
Categories Equipment Equipment Equipment EDIT:
Forgot to mention that i added in my body tag:
Hope that helps