The rationale for Google fonts used to be that your users will have most fonts cached eventually so it actually makes every website faster. If you self host, it doesn't matter that the user has the font already cached for some other website, a download for yours is still needed. A couple years ago people started self hosting due to privacy reason, since fonts is just another way for Google to track users.
Hey Jeno and thanks for this comment đ You're right in that *used to be* one of the theoretical benefits, but as discussed in another comment, that's no longer possible! You cannot cache cross-site resources anymore, since browsers started using partitioned caches for security purposes. Chrome moved to cache partitioning in 2020: developer.chrome.com/blog/http-cache-partitioning/ Safari was doing it even earlier, and the rest of the browsers moved by the end of 2021. So it's been 2+ years already where the statement "if a user has visited a site using the `Inter` font from the Google CDN, they'll get it pre-cached for every other site they visit that uses `Inter` also from the Google CDN!" hasn't been true! I also remember that use-case being a big part of the news around the Google Fonts launch, so I'd imagine most engineers would be surprised to find out it's no longer true!
You can also download the woff files and put it into the public folder. After that you can use it if you had imported the files and declared the weights.
Youâre right, thatâs another way to self-host, and if you want a font that Fontsource doesnât have, youâll need to do it like that! But itâs slightly more work, given you also need to write the @font-face CSS to declare them. Thank you for watching & pointing this out! In hindsight, I should have had a quick scene at the end mentioning this, that if you want to bring your own, even licensed, font, you can do what Fontsource is doing behind the scenes for us: Bring in the font files (.woff & .woff2) like so, write the @font-face declarations like so, + the rest of the stuff we did earlier in the video. đ
Man, google fonts were taking almost 1mb of loading time in my project, this tip reduced it to 70kb. AMAZING, thank you very much for sharing. Will always use fontsource from now.
Haha, that's a great way to put it, I wish I thought of that line for the video! đ€Ł It's funny cause it's true đ Google Lighthouse itself has given misleading scores / advice in the past too, but you can trust it when it gives advice regarding the Core Web Vitals at least. Thanks for watching, your comment will stick in my head for sure đ
@@johnnifytech thanks for your answer, I've worked in websites where performance was of extreme importance, to the extent of spending months fine-tuning every aspect of it, from the server and to the browser , exhausting every avenue to shave off a few milliseconds here and there , and avoid layout shifts etc... , the more you learn about GL , and the premises under which it was based are, the more you'll find it's an utter fallacy as it tries to dictate rules on the performance from an experiential point of view (subjective). An interesting fact is that clunky wordpress websites would somehow get higher scores, because it would favour the initial load, as opposed to taking into account the seamless browsing experience that happened in a SPA website once the initial load is complete. The most annoying thing is that non-technical or semi-technical people have access to the score as it's build in on Chrome, leading to an endless feedback loop of frustration. Apart from that the accessibility guidelines and SEO are quite good.
I know what you mean! I've been a part of a few "we need to get better a Lighthouse score" projects, and the first part is always getting to the bottom of what they really want to achieve, and then a presentation of why other metrics would be better indicators than the Lighthouse score đ Vercel's Speed Insights / Real User Experience is quite interesting, tracking some web vitals based on how actual website visitors experience them... but of course it is one of the ways Vercel makes money, you only get a modest quota of data points for one app on the free tier, but it's one of the enticing reasons to be upsold to the Pro tier!
great great but how about a no coder that uses wordpress? i dont have any terminal. I do everything from the wordpress dashboard..I want to remove google font.
Thanks for watching this one! It'd depend on the Wordpress theme you're using, or maybe there's a Wordpress plugin for that? First check if you're actually using a Webfont "the wrong way", is there a connection to googleapis or gstatic? Maybe you're using a theme where they've thought about this đ But if they haven't and there is a preconnect or whatnot... well you'd need to do *some* code & work đ unless there's a plugin which magically does it for you!
@@johnnifytech is there a difference between connecting through googleapis or gstatic? and do you think it will make a difference to load it locally in website speed? yes, there is a theme called kadence but i dont use it on my site. Might do it another site maybe in the near future. thanks
There is no difference between connecting through googleapis or gstatic, or both; the problems come from having to do the extra request(s) in the first place, and they're requests outside your own domain, so they need an extra DNS lookup amongst other things. Yes, it will make a difference to load it locally in website speed! There are case studies on the website speed impacts specifically, as well as improved conversions correlated with optimising fonts, and other things that affect your Core Web Vitals. I've experienced some of them first-hand in companies I've worked with đ Fonts are always the first thing to tackle in those situations, as they're super impactful to optimise and *relatively* easy. Images are also extremely impactful, but they're trickier to get right and it's usually achieved by using a third-party services that can get costly!
Hey Silver, thanks for watching, and great question, but with a boring answer, haha đ It's kinda like a paperwork problem with the other channel, which I figured may be easier to resolve by making a new channel... than managing to interact with a real person at CZcams! Also a bit of an experiment I suppose, checking how it is to start a new channel, or how much 2.5k subscribers actually help the videos pick up traction. I may go back / reupload to the other channel, but it feels like if the videos are good people find them, so I'll probably stick it out đ -- Thanks for the editing compliment too! I do try, which is one of the reasons my videos take so long to make! And this was probably my "most different" video in like three years, so triple thanks for the feedback, I will keep it in mind for the future too đ
No, but neither are the fonts brought in via the Google Fonts CDN! Not anymore, for about 3 years! I think you're referring to how things used to be: if a user had loaded a font using the Google CDN to render one site, they'd have it cached if they happened to go to another site using the same font from the Google CDN. But that cannot happen anymore, since browsers started using partitioned caches for security purposes. Chrome moved to cache partitioning in 2020: developer.chrome.com/blog/http-cache-partitioning/ Safari was doing it even earlier, and the rest of the browsers moved by the end of 2021. This is a great question, thank you so much đ
Not for fonts, no! And in general if you do use a third-party CDN, you benefit from making it serve through your own domain or subdomain (so `example.com/cdn`, or `cdn.example.com`). This is a point where Next.js is much simpler with its Image Optimization for example... it's a few more steps to do something like this with SvelteKit at the moment, but I may do a video covering it in the future đ
The rationale for Google fonts used to be that your users will have most fonts cached eventually so it actually makes every website faster. If you self host, it doesn't matter that the user has the font already cached for some other website, a download for yours is still needed. A couple years ago people started self hosting due to privacy reason, since fonts is just another way for Google to track users.
Hey Jeno and thanks for this comment đ
You're right in that *used to be* one of the theoretical benefits, but as discussed in another comment, that's no longer possible!
You cannot cache cross-site resources anymore, since browsers started using partitioned caches for security purposes. Chrome moved to cache partitioning in 2020: developer.chrome.com/blog/http-cache-partitioning/
Safari was doing it even earlier, and the rest of the browsers moved by the end of 2021.
So it's been 2+ years already where the statement "if a user has visited a site using the `Inter` font from the Google CDN, they'll get it pre-cached for every other site they visit that uses `Inter` also from the Google CDN!" hasn't been true!
I also remember that use-case being a big part of the news around the Google Fonts launch, so I'd imagine most engineers would be surprised to find out it's no longer true!
You can also download the woff files and put it into the public folder. After that you can use it if you had imported the files and declared the weights.
Youâre right, thatâs another way to self-host, and if you want a font that Fontsource doesnât have, youâll need to do it like that!
But itâs slightly more work, given you also need to write the @font-face CSS to declare them.
Thank you for watching & pointing this out!
In hindsight, I should have had a quick scene at the end mentioning this, that if you want to bring your own, even licensed, font, you can do what Fontsource is doing behind the scenes for us: Bring in the font files (.woff & .woff2) like so, write the @font-face declarations like so, + the rest of the stuff we did earlier in the video. đ
Man, google fonts were taking almost 1mb of loading time in my project, this tip reduced it to 70kb. AMAZING, thank you very much for sharing. Will always use fontsource from now.
Wow, ~1MB?! đ” Now thatâs gainz!
Thank you so much for taking the time to comment this, Iâm always delighted to learn Iâve helped đ
So, let me understand this, Google penalises for using its own fonts the way Google suggests. How nice! I love Google Lighthouse !
Haha, that's a great way to put it, I wish I thought of that line for the video! đ€Ł It's funny cause it's true đ
Google Lighthouse itself has given misleading scores / advice in the past too, but you can trust it when it gives advice regarding the Core Web Vitals at least.
Thanks for watching, your comment will stick in my head for sure đ
@@johnnifytech thanks for your answer, I've worked in websites where performance was of extreme importance, to the extent of spending months fine-tuning every aspect of it, from the server and to the browser , exhausting every avenue to shave off a few milliseconds here and there , and avoid layout shifts etc... , the more you learn about GL , and the premises under which it was based are, the more you'll find it's an utter fallacy as it tries to dictate rules on the performance from an experiential point of view (subjective). An interesting fact is that clunky wordpress websites would somehow get higher scores, because it would favour the initial load, as opposed to taking into account the seamless browsing experience that happened in a SPA website once the initial load is complete. The most annoying thing is that non-technical or semi-technical people have access to the score as it's build in on Chrome, leading to an endless feedback loop of frustration. Apart from that the accessibility guidelines and SEO are quite good.
I know what you mean! I've been a part of a few "we need to get better a Lighthouse score" projects, and the first part is always getting to the bottom of what they really want to achieve, and then a presentation of why other metrics would be better indicators than the Lighthouse score đ
Vercel's Speed Insights / Real User Experience is quite interesting, tracking some web vitals based on how actual website visitors experience them... but of course it is one of the ways Vercel makes money, you only get a modest quota of data points for one app on the free tier, but it's one of the enticing reasons to be upsold to the Pro tier!
The easy way comes with a cost đ
Cool video, thanks
Haha, yes đ Thank *you* for watching!
Great video, with explanation and straight to the point!
This makes me so happy, as I do try hard to keep my videos as short and useful as possible đ thanks for watching and commenting!
wooow, i am your new follower sir lab u!
Awesome, great to have you onboard Mike đ Have a look at the View Transitions videos, I think you'll like them a lot đ
There are some pro tips in there for SEO optimisations. Somethings I didn't know before watching this video!
Nice! Glad to have helped learn something new đ Thanks for watching & commenting đ
Great video thanks
Thank *you* for watching Indra! đ
great great but how about a no coder that uses wordpress? i dont have any terminal. I do everything from the wordpress dashboard..I want to remove google font.
Thanks for watching this one!
It'd depend on the Wordpress theme you're using, or maybe there's a Wordpress plugin for that?
First check if you're actually using a Webfont "the wrong way", is there a connection to googleapis or gstatic? Maybe you're using a theme where they've thought about this đ
But if they haven't and there is a preconnect or whatnot... well you'd need to do *some* code & work đ unless there's a plugin which magically does it for you!
@@johnnifytech is there a difference between connecting through googleapis or gstatic? and do you think it will make a difference to load it locally in website speed? yes, there is a theme called kadence but i dont use it on my site. Might do it another site maybe in the near future. thanks
There is no difference between connecting through googleapis or gstatic, or both; the problems come from having to do the extra request(s) in the first place, and they're requests outside your own domain, so they need an extra DNS lookup amongst other things.
Yes, it will make a difference to load it locally in website speed! There are case studies on the website speed impacts specifically, as well as improved conversions correlated with optimising fonts, and other things that affect your Core Web Vitals. I've experienced some of them first-hand in companies I've worked with đ
Fonts are always the first thing to tackle in those situations, as they're super impactful to optimise and *relatively* easy. Images are also extremely impactful, but they're trickier to get right and it's usually achieved by using a third-party services that can get costly!
@@johnnifytech ok great, i will start with image compression and google fonts loading locally. thank you for your input. I appreciate it
Just wondering why do you have two seemingly similar accounts?
BTW, I really like how the video is edited.
Hey Silver, thanks for watching, and great question, but with a boring answer, haha đ
It's kinda like a paperwork problem with the other channel, which I figured may be easier to resolve by making a new channel... than managing to interact with a real person at CZcams! Also a bit of an experiment I suppose, checking how it is to start a new channel, or how much 2.5k subscribers actually help the videos pick up traction.
I may go back / reupload to the other channel, but it feels like if the videos are good people find them, so I'll probably stick it out đ
--
Thanks for the editing compliment too! I do try, which is one of the reasons my videos take so long to make! And this was probably my "most different" video in like three years, so triple thanks for the feedback, I will keep it in mind for the future too đ
Thanks for the great response!
can this fonts be cached for other sites?
No, but neither are the fonts brought in via the Google Fonts CDN! Not anymore, for about 3 years!
I think you're referring to how things used to be: if a user had loaded a font using the Google CDN to render one site, they'd have it cached if they happened to go to another site using the same font from the Google CDN. But that cannot happen anymore, since browsers started using partitioned caches for security purposes. Chrome moved to cache partitioning in 2020: developer.chrome.com/blog/http-cache-partitioning/
Safari was doing it even earlier, and the rest of the browsers moved by the end of 2021.
This is a great question, thank you so much đ
@@johnnifytech Good to know! So there is really no reason to use cdns now.
Not for fonts, no!
And in general if you do use a third-party CDN, you benefit from making it serve through your own domain or subdomain (so `example.com/cdn`, or `cdn.example.com`).
This is a point where Next.js is much simpler with its Image Optimization for example... it's a few more steps to do something like this with SvelteKit at the moment, but I may do a video covering it in the future đ