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

Подписаться 917 тыс.

Просмотров 63 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 172

@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 10 месяцев назад

awesome tool!

@keigreencap9192 3 месяца назад

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

@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 RU-vid(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!

@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

@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

@deepinart Год назад

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

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

@ForeverChip03 2 месяца назад

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

@joshw8868 4 месяца назад

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.

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

@MrOliver1444 Год назад

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

@xarunoba3894 Год назад

Just in time!

@ttbooster Год назад

thanks! I totally needed that walkthrough!

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

@kenneumann4900 Год назад

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

@ihouelecaurcy6115 6 месяцев назад

Thank you so much, Mister Kevin!

@piotrszczesniak685 3 месяца назад

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

@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

@ShawnRitch Год назад

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

@BO-ny5mm Год назад

Great video! Thanks Kevin! 👍

@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

@valentineedesiriefagene7565 Год назад

Once again, Kev saving my life

@hodgesjaso 6 месяцев назад

Fantastic explainer and tutorial, thank you!!!

@lynx242 Год назад

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

@ananthakrishnabhat5076 2 месяца назад

Great! Really helpful.

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

@seekergold6916 Год назад

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

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

@Alex-bc3xe Год назад

This is awesome thank you sir.

@vulning2905 Год назад

Amazing Video as always

@carloautor Год назад

Looking forward to watch the variable fonts

@humayunkabirdev Год назад

Thanks, this is informative.

@marcusunivers Год назад

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

@donmorris4506 Год назад

Kevin is the man!

@mfonisoukpabio3202 Год назад

Thanks Powel

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

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

@daveskye Год назад

Good Stuff!

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

@Jancious 5 месяцев назад

Thank youuuuuu

@blackstories2293 6 месяцев назад

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!

@proteus1 Год назад

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

@borisnieminen677 8 месяцев назад

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

@edindurak2042 3 месяца назад

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.

@codyfingerson743 Год назад

Kevin, what VSCode theme are you using in the video? Is it just the default one? Love your vids btw!

@milogray98 Год назад

This is the Atom One Dark Theme

@codyfingerson743 Год назад

@@milogray98 awesome! Thank you!!

@Havii Год назад

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

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

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

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

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

@clevermissfox 3 месяца назад

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

@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

@johnsuckher3037 Год назад

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.

@dougDuarte 4 часа назад

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.

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

@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 11 месяцев назад

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.

@aj-dq6st 11 месяцев назад

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?

@jonmayer Год назад

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

@Muzly Год назад

Is that a custom Lorem Ipsum based on Middle Earth?

@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

@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

@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

@NedumEze Год назад

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

@_lonewolf Год назад

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!

@QwDragon Год назад

Use backgrounds with gradients instead.

@meepk633 Год назад

You could try filter: drop-shadow() with low blur. What happens when you put outline on the pseudoelements?

@lokeshswami9177 Год назад

Hi kevin is it useful for CWV ?

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

@emailjough Год назад

is there a way to download and self host Adobe fonts instead of making calls to typekit?

@nomadshiba Год назад

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

@uiaugust97 3 месяца назад

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

@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

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

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

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

@clevermissfox 2 месяца назад

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 2 месяца назад

I think it was this one: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0fVymQ7SZw0.html

@clevermissfox 2 месяца назад

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

@JC-yy5nf 3 месяца назад

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!

@peterwagner538 Год назад

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

@nomad100hd Год назад

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

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

@abdulnafay72 Год назад

lol was working on setting fontface and you showed up

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

@Robert08010 2 месяца назад

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.

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

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

@arshadahmed366 Год назад

Awesome 😎

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

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

@GGdevelopment Год назад

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

@pinnaclewd Год назад

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

@valueboy 10 месяцев назад

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

@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

@oesso Год назад

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

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

@halopronesishere4019 Год назад

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

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

@prontocreative2374 Год назад

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

@venicebeachsurfer 4 месяца назад

This doesn't work with localFont?

@ygjt76v0----- Год назад

Mona sans is 👍

@chrishuhn5065 Год назад

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.

@meepk633 Год назад

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

@chrishuhn5065 Год назад

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