Google Fonts is still a great resource for discovering fonts. For example, this link filters fonts to subset by latin languages and only show variable fonts. You can download fonts from here to self-host! fonts.google.com/?subset=latin&vfonly=true

Please keep on making videos of these in-depth , Your explanation is crystal clear to me, Thanks a lot

This is wild, I was just reading up on variable fonts last night - what great timing!

Finally, someone who explains that in-depth. Thanks man.

I was just checking out your site, specifically the web fonts 2021 page. I figured I go onto youtube to further advice and boom here you are :) thanks for this video! Very helpful

Definitely using these tips on the current site I'm building. Thanks for sharing!

Last night I was working on fonts in my react native app, and now KZread recommends your video :-) thank you for info. 👍

Great content as always

Thanks for this video and yes we do need more videos like this and yes we do need a video for improving performance and google rank in depth!!! Keep creating...

I use Comic Sans. Glad I watched this video!

@saurishs

3 жыл бұрын

pls no comic sans

Nice video 👍 really clear and simple to understand

such good content, thanks!

very good material, thank you

Avoid display swap at any cost explained with example. Mind blown!!. I always swapped fonts.

Great !!! I love this. :-)

Great video! i've been using subsetting for a while now and it's a must when using custom fonts imo. Have you tried using base64 fonts before? I usually base64 my fonts and then inline them in the head; It usually has the best performance. Would be curious to know if you've tried using base64 fonts and your thoughts.

I love all your new content! Btw, how did you cache your fonts while using next js, did you set up a custom server?

@AKMagicianUnleashed

3 жыл бұрын

Adrian Gonzalez I’m curious about this as well

@leerob

3 жыл бұрын

You can see an example here: github.com/leerob/leerob.io/blob/master/vercel.json#L4-L14 You can also use `headers` in your `next.config.js`!

@AKMagicianUnleashed

3 жыл бұрын

@@leerob Good to know, thank you!

Great content.! How would I subset my fonts from the google font, is there any tool?

He should have so much more subscribers

Great video, really thorough material. The additional question would be how do you subset a font file to keep a certain type of characters.

@leerob

3 жыл бұрын

Here's one CLI tool. I believe there's also some online tools for this. www.afasterweb.com/2018/03/09/subsetting-fonts-with-glyphhanger/

thanks sir.

Nice!

Great video! May I ask if there is any benefit to using the webfont.js library in 2021?

Great videos , I've watched a bunch in the past few days, I was wandering what theme are you using on vscode , I really like it !

@leerob

3 жыл бұрын

Sorcerer! leerob.io/uses

Very helpful video but the part where the downloaded google fonts get converted to woff2 is missing? Is there a follow-up video on doing that?

Need a video on preload n prefetch in depth ..

Great video! Would you mind going into depth about how these tips could be used with NextJS? E.g. how the process of self-hosting fonts on Vercel works, how to fetch those fonts, etc.? Thanks!

@leerob

3 жыл бұрын

My blog uses this exact setup with Next.js and Vercel. You should be able to copy it from here! github.com/leerob/leerob.io

@AwesomeLegend99

3 жыл бұрын

@@leerob Thanks, much appreciated!

How can I do the step in 7:01​ - Variable Fonts & Subsetting

How can I get web fonts from sites like FontSquirrel, which often now says web fonts are allowed, but then does not include them for download? Various other free / libra / open-source font sites have this issue. Am I supposed to run them through a generator? Unclear. They used to host web fonts for download, but stopped. I'm now unclear on what I'm allowed to do, even though these are supposed to be legit for public, commercial-free use.

Cool

If you self-host doesn't that mean that you are eating into your bandwidth allowance? Or is that not a thing with vercel?

What extension do you use to grey out your import statements?

@leerob

3 жыл бұрын

Sorcerer is my theme! leerob.io/uses

How do I do self-hosting if I'm not using nextjs

@leerob

3 жыл бұрын

Depends on what your tech stack is. You basically put your font files on your CDN and then reference them from your app!

So if I use system fonts, I will not have to preload or do anything myself either. Is this true?

@leerob

3 жыл бұрын

Correct! However, you'd need to be okay with your site looking different cross-platform. For example, if you use the Apple system font, you'll need a different fallback for Windows users.

Anyone know how to integrate google fonts with Tailwindcss? I've tried EVERYTHING, cant seem to get it to work

@leerob

3 жыл бұрын

Hey! Are you using React or Vue or something else with Tailwind? In general, you'll want to override the tailwind config to add the custom font family, and then ensure you're loading the web font somewhere (e.g. CSS file or link tag).

@cleo0318

3 жыл бұрын

@@leerob Thanks for responding so promptly! I'm actually using Next.js with Tailwindcss. I'm using _document.js and between adding the google font . then in tailwind.config.js theme: { extend: { fontfamily: { sans: ['Manrope', ...defaultTheme.fontFamily.sans], } ..... Default font keeps loading! dont know why :( I have also tried using @import in /styles/global.css I can provide github link if thats okay :)

@leerob

3 жыл бұрын

@@cleo0318 Huh strange, that's exactly what I do on my site (using Tailwind / Next): github.com/leerob/leerob.io Feel free to share your link!

@cleo0318

3 жыл бұрын

@@leerob Issue is resolved! tailwind.config.js had such a minor typo i didnt notice. I used theme: { extend: { fontfamily: { fontfamily should be fontFamily! 😅😅😅 Good to know at least my approach was correct. Thanks for your response!

how can we subset fonts?

@jacquestertulien

3 жыл бұрын

Graphhanger and fonttool

@jacquestertulien

3 жыл бұрын

Glyphhanger*

font-family: system-ui; very short system font defination