Self-hosting fonts explained (including Google fonts) // @font-face tutorial

[@KevinPowell]

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/

[@le_wuerzingeer]

yes this tool is absolute wonderful and save a lot of time

[@TomisaburoRMizugawa]

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

[@DereC519]

awesome tool!

[@keigreencap9192]

@@TomisaburoRMizugawa this is still true the woff files are linked in the stylesheet and they are typically a bit smaller than self converted files

[@iamtharunraj]

Awesome tool but looks like it's from the 90s lol

[@Flash136]

I was literally searching about this an hour ago. How did you know I needed this?

[@hiryuimajin]

He is always like that lol!

[@igorjerkovic4891]

Me too..

[@dastaan3468]

Google

[@Karrnfr]

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 KZbin(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

[@KevinPowell]

That's amazing, congrats!

[@xorlop]

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!

[@MrOliver1444]

Thank you Kevin, I host them already locally but it is good to be conscious to know what it does.

[@valentineedesiriefagene7565]

Once again, Kev saving my life

[@lynx242]

thanks for helping me make my part of the internet more awesome!

[@IainSimmons]

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.

[@KevinPowell]

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

[@BO-ny5mm]

Great video! Thanks Kevin! 👍

[@codedynamics1]

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

[@edindurak2042]

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.

[@uiaugust97]

How to make it work when not using index or your file html file is in a folder? How to handle global declarations

[@prontocreative2374]

lol on front end friends ... apologise i heard this for the first time and made me caccle

[@oesso]

What about a video on how to host this on a server, paid hosting server.

[@outpost31737]

This is great, thanks Kevin. Does this mean I don't need to enqueue my fonts in WordPress?

[@NielsPilon]

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.

[@outpost31737]

@@NielsPilon Ta!

[@deepinart]

Can't wait for the video on variable fonts, really interesting

[@KrisDesChacals]

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 :)

[@traziverse]

Thats really a good idea. I think i'll find a use case for that :D

[@pinnaclewd]

Not 100% sure UK has to abide by new GDPR updates as we obviously stepped out of EU a few years ago.

[@Robert08010]

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.

[@xarunoba3894]

Just in time!

[@clevermissfox]

Did the video on doing this with variable fonts (and the extra steps involved) ever get made ?

[@ceralguy85]

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

[@Muzly]

Is that a custom Lorem Ipsum based on Middle Earth?

[@marcusunivers]

1:21 A variable font tutorial will be cool :)

[@proffelipesilva]

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! 🤟🏻

[@jonmayer]

9:29 the wording caught me off guard. 😮 🤣 💦

[@ahmtglsn]

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.

[@Gromran]

@@THEROOT1111 Not by auhorities. But by shady lawyers

[@DerLuukee]

@@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.

[@Havii]

@Kevin Powell Are you making use of NVIDIA's new "Eye Contact" feature in this video?

[@Pfoffie]

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 :)

[@thedacian123]

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!

[@user-l9v7xff567]

어렵네요 폰트를 다운로드 후 코드로 변환해서 삽입해주는게 핵심인가요? 제가 이것을 제대로 이해한 것이 맞나요

[@Cipscis]

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.

[@lawrencedoliveiro9104]

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...

[@moreorlesslikeso]

Great tutorial - straighforward and easily understandable. Thanks a lot!

[@outpost31737]

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.

[@dougDuarte]

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.

[@eqprog]

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.

[@goannacs6861]

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 🤣

[@aj-dq6st]

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?

[@rand0mtv660]

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.

[@robertn2997]

Shouldn't you add `font-display: swap` to it to prevent blocking time? Or is that not needed with self hosted fonts?

[@nedveddev]

I was also curious about this

[@borisnieminen677]

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

[@JimKernix]

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.

[@najmantube]

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?

[@JimKernix]

@@najmantube I switched to Roboto and that solved the issue

[@najmantube]

@@JimKernix Yes, Roboto works, so does Lato. However, a different font than those might be required.

[@najmantube]

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.

[@ChrisMits1]

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."

[@seekergold6916]

Literally just got a ticket to fix this issue at work!

[@StarOnCheek]

There is probably a way to avoid this unnecessary manual work with a Vite plugin

[@lachee3055]

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

[@ChocolateTaiyaki]

I got lazy reading mdn docs so im here watching this video

[@RemotHuman]

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

[@venicebeachsurfer]

This doesn't work with localFont?

[@SeanCassiere]

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.

[@mimiii1788]

Germany is such a ridiculous country.

[@JC-yy5nf]

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!

[@brisket222]

thank u!!! this fixed my issue

[@peterwagner538]

Can you show how to do it in scss? It never works for me there.

[@rittickmondal9458]

I am getting an error The font 'montserrat-bold.ttf' is corrupt and cannot be converted.

[@maximonahualli3376]

Me too but with Inter.ttf

[@GGdevelopment]

700k subs!?!? Where does time go???

[@autogenes]

Some Google fonts are labeled as corrupted by fontsquirrel. Tried redownloading, it's always the same fonts, i.e. Alegreya and others.

[@KevinPowell]

Check my pinned comment, I have a link to another tool there

[@Jancious]

Thank youuuuuu

[@mouldtony]

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.

[@oohnajra]

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.

[@ibrahim_youssef_13.12]

Awesome, Kevin

[@bobbysilver272]

I find using google fonts SOooooooo confusing.

[@Alex-bc3xe]

This is awesome thank you sir.

[@lokeshswami9177]

Hi kevin is it useful for CWV ?

[@ananthakrishnabhat5076]

Great! Really helpful.

[@prontocreative2374]

huh , font is a breach of GDPR ! ? worlds gone mad

[@KevinPowell]

It's not the fonts, but that using a font hosted by Google does, since they are visiting your site, that doesn't mean they give Google permission.

[@blackstories2293]

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!

[@mfonisoukpabio3202]

Thanks Powel

[@ygjt76v0-----]

Mona sans is 👍

[@daveskye]

Good Stuff!

[@joshw8868]

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.

[@ShaunLevett]

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.

[@romaingillier6327]

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 :)

[@ForeverChip03]

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

[@clevermissfox]

Is there a video about hosting variable fonts? Mentioned wanting to make a vid but I’m not sure if it was ever completed ?

[@KevinPowell]

I think it was this one: kzbin.info/www/bejne/Zpe5qqCHbLiNrZI

[@clevermissfox]

@@KevinPowell awesome thank you, I had already watched it too , you'd think I would remember that it exists 🤦🏻‍♀️

[@dieshimitigert6758]

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

[@nomad100hd]

If I'm remembering correcly I don't think Safari will load local fonts anymore.

[@hodgesjaso]

Fantastic explainer and tutorial, thank you!!!

[@BigBaddaBoom]

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.

[@piotrszczesniak685]

Thanks for this tutorial Kevin, you are my go to CSS source of truth :)

[@vladimiranusic363]

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 ??

[@nomadshiba]

Kevin, you should make a video about `contain: paint` its really useful with `position: sticky `

[@kenneumann4900]

Thx. Exactly what I was looking for and easy to understand.

[@ihouelecaurcy6115]

Thank you so much, Mister Kevin!

[@stimolus]

Hey Kevin, when you set multiple sources for font-face, is there a way to check which one of them browser is actually using?

[@halopronesishere4019]

Are you using this new nvidia thingie which manipulates your eyes ?

[@artdooh]

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 :)

[@abdulnafay72]

lol was working on setting fontface and you showed up

[@proteus1]

Nice to learn something new. Do you have a video showing how to make a CSS responsive nav for desktop and mobile?

[@ShawnRitch]

You read my mind lol I was just looking into how to host fonts. Thank you soooo much :)

[@carloautor]

Looking forward to watch the variable fonts

[@NedumEze]

What about icon fonts? Are they handled in the same way?

[@MarkusEicher70]

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. 🤝

[@ttbooster]

thanks! I totally needed that walkthrough!

[@humayunkabirdev]

Thanks, this is informative.

[@vulning2905]

Amazing Video as always

[@tomjardine-smith2793]

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?

[@moy2010]

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.

[@lawrencedoliveiro9104]

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?

[@KevinPowell]

I feel like that's more work than setting them up yourself 😅

[@JonRonnenberg]

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

[@JonRonnenberg]

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.

[@donmorris4506]

Kevin is the man!

[@joedyer1989]

Tip: preload font files in the head for better CWVs (core web vitals) performance.

[@najmantube]

How do you do that?

[@darz_k.]

@@najmantube - within a tag.. same code as Kevin uses in the CSS file

[@najmantube]

@@darz_k. Thanks :) I had to look this up - CWVs = Google’s Core Web Vitals

[@darz_k.]

@@najmantube - I had to look CWV up too! ;oD

[@joedyer1989]

@@najmantube It's not a style tag, you need to use a link tag:

[@stevesmith8456]

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?

[@stevesmith8456]

Watched a bit more and you answered my question thanks

[@alfredkonneh2963]

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.