Self-hosting fonts explained (including Google fonts) // @font-face tutorial
HTML-код
- Опубликовано: 4 июл 2024
- Google fonts are great, but often self-hosting them is a better choice, or if you’re in parts of Europe, it might be your only choice, so in this video I take a look at the basics of how to self-host fonts.
🔗 Links
✅ Font Squirrel Webfont Generator: www.fontsquirrel.com/tools/we...
⌚ Timestamps
00:00 - Introduction
01:05 - Getting fonts from Google fonts
02:03 - The problem with downloaded Google fonts
02:30 - Converting from .ttf to .woff and .woff2
05:35 - Adding the fonts to a project
06:36 - Setting up @font-face rules to use the fonts in our CSS
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
A few people pointed out this tool for getting Google fonts, which gets you the font, including converting it and the @font-face declarations - gwfh.mranftl.com/fonts/
yes this tool is absolute wonderful and save a lot of time
Last time I checked (a while ago though) Google would provide both the woff/woff2 files as well as the @font-face style sheet if you looked for it
awesome tool!
@@TomisaburoRMizugawa this is still true the woff files are linked in the stylesheet and they are typically a bit smaller than self converted files
Awesome tool but looks like it's from the 90s lol
Hello Kevin, I am a Junior developer. I started coding in March of 2022 and I wanted to say thank you for your videos on RUclips(especially one on responsive - you built a blog site). You are a great tutor. I landed my first job as full stack developer. Thank you sir
That's amazing, congrats!
I was literally searching about this an hour ago. How did you know I needed this?
He is always like that lol!
Me too..
Google
Can't wait for the video on variable fonts, really interesting
As a Web UI Engineer your channel is the best resource for learning CSS in deep, all the topics are very well explained and really encouraging people not to be afraid of work with CSS. Thank you for sharing this content with the community
Once again you've achieved a good mix between a tutorial and a discussion of relevant issues. It's very noble of you to always reference ARIA during your videos. Message from your BR fan: TÚ É BRABO, FECHAMENTO! TMJ! 🤟🏻
Ever since i discovered this channel, my learning has been much quicker. U make every problem of mine much simpler to understand, and i would like to really say i appreciate u very much for ur help
I gotta say, I love your vibe and energy. Your content is always engaging, informative, and concise. As a self taught web developer, I really appreciate the work you do.
Thank you, Kevin. That was helpful, because I have to deal with the German GDPR and I will use this for sure. As always happy to have your content at hand. 🤝
thanks! I totally needed that walkthrough!
Thank you so much, Mister Kevin!
Thanks for this tutorial Kevin, you are my go to CSS source of truth :)
Great video! Thanks Kevin! 👍
You read my mind lol I was just looking into how to host fonts. Thank you soooo much :)
Thx. Exactly what I was looking for and easy to understand.
Once again, Kev saving my life
Once, I had a problem with the font 'Geomanist'. The rendering between the Web font version I had and the one which was on my computer was way different, and the one on my computer was pretty ugly. Since that time, I want to be sure that websites I work on are using the version of the font they provide, so I rename the font-family inside the @font-face with something like 'Geomanist-web' instead of just 'Geomanist'. It's just a simple trick :)
Thats really a good idea. I think i'll find a use case for that :D
Thank you Kevin, I host them already locally but it is good to be conscious to know what it does.
Fantastic explainer and tutorial, thank you!!!
Your videos are sooo great. I thanky you so much KEvin!
I'm living in Germany and it is really a problem if you use google fonts. So thanks for the great and short explanation :D
thanks for helping me make my part of the internet more awesome!
Just in time!
I'm from Germany and started learning in November and came across this problem. And now you just make a video about it and even mention my country 🤣
This is awesome thank you sir.
Great! Really helpful.
wow, I had no idea about that webfont optimization and had not really heard of all the cross site cache no longer working.... good to know!
Thanks, this is informative.
Amazing Video as always
Looking forward to watch the variable fonts
Thank you for this. This allows me to use more fonts in my projects without offloading my user's privacy by using Google fonts thru the usual means. The idea of loading site data from a dozen servers always made me uncomfortable. This way, it is all local.
Thanks for this, took a while to get up and running with Tailwind but I'm loving it... Interested in what'll be the differences with the "variable" fonts.
Literally just got a ticket to fix this issue at work!
Thanks Powel
Kevin is the man!
1:21 A variable font tutorial will be cool :)
That's what we're dealing last couple of months hier in Germany. It could be result from 100€ up to 250,000€ fine. Thanks you for addressing this issue.
@@THEROOT1111 Not by auhorities. But by shady lawyers
@@THEROOT1111 worst thing is recaptcha. It does communicate with google the moment you load the page, even before the user has said yes to this data flow.
However, you can't wait for the users approval to use recaptcha. Like this bots could just spam your system.
GDPR is a pretty stupid, not well implemented system.
Good Stuff!
Tabular Numerals is an expert setting on font squirrel that comes to mind as an important one. It is used for font-variant-numeric: tabular-nums; so a counter or time doesn't change width when changing values. E.g. 08:00 will be the same width as 11:11. Very useful
One thing to be aware of, is that the font must support tabular numerals or it won't work. Google Font sometimes use very old fonts with limited features.
Thank youuuuuu
Nice to learn something new. Do you have a video showing how to make a CSS responsive nav for desktop and mobile?
Hello Kevin, great video, been using this for a while as a kinda template with switching just font src. I have two questions if you Kevin or you guys encounter. First is, how much can you further optimize font file if you add unicode-range prop, is it worth the trouble and second is if you @import google font, cdn, and you go to Page speed Insights and Google is complaining about their font and optimization, is it better to host font or not ??
I'd be wary of using all of the default settings within FontSquirrel. In particular, if I remember correctly, it automatically applies subsetting.
In my home country of Aotearoa New Zealand, at least, their default "basic subsetting" unfortunately strips out important characters used in our indigenous language te reo Māori. The result of this subsetting is that, any time a vowel with a macron (e.g. āēīōū) appears, that character will fall back to another font.
The way to avoid this is to either not apply subsetting at all (my personal preference), or to take the time to deliberately choose what subsetting to apply.
I had a look at their “Expert...” settings page. There was nothing relevant-seeming there until I selected “Custom Subsetting...”. Then a list of languages appears, but Māori isn’t among them. (All the ones shown are European, except Turkish and Malagasy. And “Cyrillic” is listed as a language--who knew?)
There are also lower-level options for choosing “Character Type”, and also “Unicode Tables”, “Single Characters” and “Unicode Ranges”. You probably have to experiment with these to see which one(s) produce the right results.
Seems to me like a job for a command-line tool...
Kevin, what VSCode theme are you using in the video? Is it just the default one? Love your vids btw!
This is the Atom One Dark Theme
@@milogray98 awesome! Thank you!!
Thanks Kevin, google fonts weren't loading for me using the regular import & as the files we too large and browser has to wait to download them before continuing to render the page
@Kevin Powell Are you making use of NVIDIA's new "Eye Contact" feature in this video?
Hey Kevin, when you set multiple sources for font-face, is there a way to check which one of them browser is actually using?
Hi Kevin, I'm new to CSS, HTML, and JS. For my Bachelors Thesis I want to build a study and change fonts and colors for specific stimuli.
Where do you save the fonts in your project/ folder at 5:50?
I don't quite understand how to create a project with different files and sites or where to save the files. Thanks in advance!
Just one heads-up: when i converted the font to woff using font-squirrel (Poppins in my case), using the Optimal setting, it clearly loose quality and precision in render. So, i changed the setting to Basic and it worked fine.
GDPR is ruining the web. I can't make my corner of the internet 'a little bit more awesome' when I have to make the user read, select, check and accept all kinds of dialogs and T&C's before they can use my site. Nice to know I can use this to 'step around' that headache for fonts at least. Thanks Kevin.
It's not GDPR that's ruining the web, but it's companies like Google that don't give a crap about people's privacy and use their "free" services (like Google Fonts) to gather as much information from unwitting website visitors as possible. If it weren't for their actions GDPR wouldn't even be necessary.
Hello Kevin, I hope you are doin well.
I have a quick question: What if I want to use regular font but with different font-weights, do I need to set a font-face for every font-weight or there is another way?
For example I would use 3 font-weights on my website: 300, 400 and 800.
Thanks in advance.
Excellent. I've built my site already and would like to implement this. Will I lose all of my font settings and have to set up my fonts again on all my pages? Thanks
great tutorial, but could you do a video on why i should care about GDP in the first place for my personal projects or websites focused on my country not europe
Not 100% sure UK has to abide by new GDPR updates as we obviously stepped out of EU a few years ago.
You mentioned using the filename for the local() function in the font-face rule, but surely it's the installed name or some other metadata?
For those on a Mac, I suppose you'd open Font Book to find it.
No, you simply put in the font's name!
You can even see this working installing a Google font on your computer, and then using it for a website without ever linking to the font anywhere in your CSS, and it'll work. Once a font is installed on a system, the computer is smart enough to figure things out from there (thankfully).
You can see bit more about it here: developer.mozilla.org/en-US/docs/Web/CSS/@font-face#description
Nice,but i didn't understand how font weight is mapped to font file , i mean How should i know that a downloaded font file maps properly to a font weight?Thank you!
Kevin, you should make a video about `contain: paint` its really useful with `position: sticky `
Is that a custom Lorem Ipsum based on Middle Earth?
I usually download the files from google fonts so i don’t have to write the CSS. And yes I know that’s probably more work ahahaha :)
For the font-weight declaration, do you have to use numbers? Or could you set the font-weight within @font-face to something like 'light' or 'medium'? And then can that be referred to in my css on (in this video's example) the body?
You have to use numbers. If you use a string, your styles will simply be ignored because it's not a valid value. That's how CSS deals with errors.
9:29 the wording caught me off guard. 😮 🤣 💦
Fonts are a minefield now. If it’s a bought one you often have to download a ‘web’ version not ‘desktop’ and then a lot still place arbitrary view counts in them. I just want to buy a font and use it. But seems to be very hard now with providers wanting you to pay to get it and pay to use it.
Hi Kevin,
- I don't understand why you use "format". Is it really useful ?
- Is there any way to declare all the family in one decorator or at least to reduce the code ? Because it's duplicating a lot.
Have a good day :)
I had this strange issue in my company that if I use font-face to import files (otf/woff or EVEN local() doesn't matter) it becomes blurry on edge/chrome but works ok on mozilla (and mobile Edge) but if I don't use font-face but just provide the font name (installed on all pcs) then it's not blurry. I tried importing this so it could be shown on mobile. Any ideas why fonts served via font-face become blurry? :/ I tried playing with antialiasing with no avail.
Man the amount of time I've seen people define font-face where each declaration is a different font-family name is baffling to me. So for example define Roboto-Light, Roboto-Regular, Roboto-Bold and then when you need a bold font, you don't specify the weight, but rather the font-family. It just doesn't make sense to use it that way, but I've seen it in codebases quite a few times.
What about icon fonts? Are they handled in the same way?
Did the video on doing this with variable fonts (and the extra steps involved) ever get made ?
Shouldn't you add `font-display: swap` to it to prevent blocking time? Or is that not needed with self hosted fonts?
I was also curious about this
This is great, thanks Kevin. Does this mean I don't need to enqueue my fonts in WordPress?
Yes, no need to enqueue them when using @font-face in your theme’s stylesheet. Just make sure to add the font files to your theme as well.
@@NielsPilon Ta!
Kevin, I've been working on a navigation bar for my site and wanted to make a trapezoidal button as the center button. I was able to achieve this buy creating before and after elements that are angled and attached to the original element which is a rectangle. That works completely fine, except I want to apply an outline around the whole shape(including the pseudo elements) that's offset by two pixels. Whenever I try and apply that CSS however, it does it only around the original element but not the pseudo elements. Do you know of any way I can achieve this effect? Thanks!
Use backgrounds with gradients instead.
You could try filter: drop-shadow() with low blur. What happens when you put outline on the pseudoelements?
Was stuck on this part here 9:35. Applying my font would not work. On the 'elements' tab it would show that I did indeed apply the font, but the font would not display on my text. The issue was the url() import in my font family decleration. Instead of doing url('assets/fonts/etc') I had to do url('../../assets/fonts/ect'). This means I had to do relative paths to get the font working in my URL path. Just a tip for anyone else if they were stuck!
If I'm remembering correcly I don't think Safari will load local fonts anymore.
Be careful, There is a look alike page that "offered to install a necessary browser extension" It was like "font squirrel" but spelled incorrectly. I accidentally used 1 R and 2 L and almost got a virus.
Hi kevin is it useful for CWV ?
I haven’t had the chance to watch the whole video yet but what are the benefits performance wise? I used to find using font-face would show a pop-in when the page loads is this no longer the case?
Watched a bit more and you answered my question thanks
700k subs!?!? Where does time go???
Nice, but if you show something on the screen and it's covered by you, move yourself in the edit so we can see what you're showing :)
lol was working on setting fontface and you showed up
Google fonts provides 2 variations for Nunito Sans, 7pt and 10pt ttf files. What's the difference b/w them and which is standard one?
is there a way to download and self host Adobe fonts instead of making calls to typekit?
Can you show how to do it in scss? It never works for me there.
How to make it work when not using index or your file html file is in a folder? How to handle global declarations
Hey Kevin, can you do a video basically complaining vicariously about the ::backdrop pseudo-selector? I am extremely disappointed with how inflexible/non-standard it is, especially from the perspective of programmatic style manipulation and use of custom properties. (Custom properties on ::backdrop *not* inherit from their parent elements!)
Edit: so maybe I didn’t ask this question in the most flexible way I am just extremely frustrated that I can’t get this to work the way I hoped it would.
What about a video on how to host this on a server, paid hosting server.
I downloaded Open Sans but when I tried to upload them to font squirrel I got the warning: "The font 'opensans_condensed-bold.ttf' is corrupt and cannot be converted." Is there an issue with Open Sans, or is that something on my end? Also, in the Static folder I had other folders: 1. OpenSans, 2. OpenSans_Condensed, 3. OpenSans_SemiCondensed.
I got the same. Also for 'Montserrat'. Could be that it is primarily a variable font and the static files are some kind of backup?. (Folders 2 and 3 of 'Open Sans' are just variants. You can, or should, be able to ignore them. Academic at this point, as the static files are considered to be corrupted by Font Squirrel). Anyone out there got an answer for this?
@@najmantube I switched to Roboto and that solved the issue
@@JimKernix Yes, Roboto works, so does Lato. However, a different font than those might be required.
Hmm. my comment keeps being deleted. I'll try again. I got Open Sans embedded by using a different web font generator. I had to upload and convert the (static) files one at a time, but it worked. I can't include the URL, but if you search for 'Webfont generator - Creative Fabrica' you should find it.
Just switch to another webfont generator, plenty out there. Try "Fontie" or "Transfonter" which are also online tools, seem to be working fine (minus some features).
I found out that the issue you are facing, maybe it is somehow related to this:
"A number of freely licensed fonts can no longer be converted to webfonts due to false positives on some kind of generalised blacklist. It seems that the vendor of the font is checked on upload and if that vendor also sells retail fonts then the uploaded font cannot be converted."
Is there a video about hosting variable fonts? Mentioned wanting to make a vid but I’m not sure if it was ever completed ?
I think it was this one: ruclips.net/video/0fVymQ7SZw0/видео.html
@@KevinPowell awesome thank you, I had already watched it too , you'd think I would remember that it exists 🤦🏻♀️
Are you using this new nvidia thingie which manipulates your eyes ?
How likely do you think it is that other web developers might get lazy and link to copies of the fonts on your server, instead of providing their own copies?
I feel like that's more work than setting them up yourself 😅
Tip: preload font files in the head for better CWVs (core web vitals) performance.
How do you do that?
@@najmantube - within a tag.. same code as Kevin uses in the CSS file
@@darz_k. Thanks :) I had to look this up - CWVs = Google’s Core Web Vitals
@@najmantube - I had to look CWV up too! ;oD
@@najmantube It's not a style tag, you need to use a link tag:
Sir I don't know why drag and drop doesn't work for me in vscode. And I just got into programming recently. Please help me.
lol on front end friends ... apologise i heard this for the first time and made me caccle
Some Google fonts are labeled as corrupted by fontsquirrel. Tried redownloading, it's always the same fonts, i.e. Alegreya and others.
Check my pinned comment, I have a link to another tool there
Strange, my custom fonts won't load.
@font-face {
font-family: "AddingtonCF";
src: url("/assets/fonts/addingtoncf-light-webfont.woff2")
format(
"woff2",
url("/assets/fonts/addingtoncf-light-webfont.woff") format ("woff")
);
}
Absolute pain the in neck. The file path is correct.
Awesome 😎
This doesn't work with localFont?
어렵네요
폰트를 다운로드 후 코드로 변환해서 삽입해주는게 핵심인가요? 제가 이것을 제대로 이해한 것이 맞나요
Mona sans is 👍
Small tip to spare you the head scratching: If you thought you could use a custom property for the font family name inside the @font-face block and where you use it to make sure it's working - forget about it. Properties don't work inside of @font-face.
Do you mean using something like,
font-family: 'mont';
instead of
font-family: 'Montserrat';
? I think you can. According to the spec for font-family,
"This descriptor defines the font family name that will be used in all CSS font family name matching. It is required for the @font-face rule to be valid. It overrides the font family names contained in the underlying font data. If the font family name is the same as a font family available in a given user’s environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts..."
@@meepk633 No, I meant defining
:root { --fontName: 'CollisionFreeRobotoFontFromWeb';
and then using using *var(--fontName)* instead of a font family name as a literal string in the rest of the css file(s).
Idk why this is normalized you are sending your users data to google im pretty sure. Just put it on your website - same with images
There is probably a way to avoid this unnecessary manual work with a Vite plugin
First comment