Fast Sites Start with Fonts: A Deep Dive with Daniel Roe Artwork

The Weekly Dev's Brew

Join host Jan-Niklas Wortmann in 'The Weekly Dev's Brew, where we explore the latest in web development, JavaScript, TypeScript, and emerging technologies. Engage in coffee shop-style conversations with industry experts to learn about frameworks like React, Vue, Angular, and everything remotely related. Follow us on social media for more insights https://www.weeklybrew.dev/

All Episodes

The Weekly Dev's Brew

Fast Sites Start with Fonts: A Deep Dive with Daniel Roe

July 06, 2025 • Jan-Niklas Wortmann | Web Development Enthusiast & Podcast Host • Episode 7

In this episode of The Weekly Dev’s Brew, Jan sits down with Daniel Roe to dive deep into a topic devs often overlook: web fonts. From performance pitfalls to implementation strategies, Daniel breaks down why your font choices might be slowing down your site—and what you can do about it. Whether you’ve been blindly copy-pasting Google Fonts or wondering how to ship faster, cleaner web experiences, this episode delivers practical insights with zero fluff.

☕ Pull up a brew and learn how to stop letting fonts wreck your performance budget.

Our Fantastic Guest
Danie Roe
Daniel leads the Nuxt core team. Previously, he was CTO of a SaaS startup and founder of a creative agency focusing on clarity of vision and message.
His open-source work has a focus in the Vue.js and Nuxt ecosystems. He's a keynote speaker at conferences and involved in consultancy with companies around the world, particularly around JAMstack, serverless and software architecture.

Bluesky
GitHub
LinkedIn

Chapters

00:00 - Into
00:36 - performance impact of fonts
03:03 - Font Optimization
04:37 - What is font subsetting?
06:54 - How to handle font licenses?
11:05 - How to prevent layout shifts?
17:07 - How to learn about fonts?
20:01 - What are Variable Fonts?
22:55 - Accessibility of Fonts
26:38 - System vs Custom Fonts
30:46 - About Font Providers
33:15 - How to know which font is applied?
35:48 - Local vs remote fonts
36:41 - Dynamical changing fonts?
38:17 - Fonts and i18n
40:45 - On Ligatures
42:36 - Outro

Links and Resources
Stoyan's Blog

Production support for this video was kindly provided by WebStorm. Thanks for helping bring this idea to life!

Thank you very much for listening!

We are also pretty much on all social media platforms, so make sure to like and subscribe!

Homepage - https://www.weeklybrew.dev/

BlueSky - https://bsky.app/profile/weeklybrew.dev
Instagram - https://www.instagram.com/weeklydevsbrew/
TikTok - https://www.tiktok.com/@weeklybrew.dev
YouTube - https://www.youtube.com/@theweeklydevsbrew
LinkedIn - https://linkedin.com/company/the-weekly-dev-s-brew

1:00:00

Hey, everyone. Welcome toanother episodeof the Weekly Dev's Brew .I'm here with Daniel Roe .You probably already heard ofhim in some way,but he does do some fancythings with Nuxt and stuff.Having that said, we're nottalking about Nuxt.We are talking about web fontswhere I have zero to,not really a wholelot of clue about.So I'm very excited to talk toDaniel about fonts today.Hi, Daniel. How are you doing?Hello. It's apleasure to be here.Thank you. So I basicallyalready teased it.When I implement a website, Iusually use Google Fonts orsomething like thatto just get started with it andthen don't bother about it.But based on recent talks thatI've seen of yours,you seem to havesome opinions on fonts,in particular how they affectruntimeperformance of websites.So tell me more about that.So, I mean, I totallyget what you're saying.First thought, webfonts are amazing.Because it used to be that itwas not so simple.No, I don't. You probably donot remember the days beforenative browser web fonts.I do.No, you rememberthe days before.You did like Kufon, like theflashimplementation of web fonts.No, I'm not.No, no, no, no,no, no, exactly.But yeah, it's amazing thatthings like Google Fonts exist.And you can just drop a link inyour head andyou are good to go.But there areproblems with that.And so, and there used not tobe so many problems.But, um,there are so many problems.So it used to be, for example,that you could cache resourceslike web fonts across sites.So Google Fonts couldsay, hey, here's a link.This is the link for, you know,Papyrus or whatever.And then every website that wasusing that font, you know, theCSS would be the same.The fonts could be cached.That's, ofcourse, no longer true.Because there's nocross origin caching.Yes.It makes sense.Those people to try and trackus through cache timing, youknow, they'rethe reason we can'thave nice things.And so we can't.But it, when you put that linkin, it obviously is going toimmediately add theoverhead of connectingto another origin, hitting aDNS server for it.And that doesn't even get intothe issues of that are causedsimply by having a web font ofany kind in your project.But, I mean, that could besolved if you bundle the fontwith your project.Then it's not, at least not across origin recrised anymore.Yes, you can do that.Exactly.The way you're talking aboutit, that sounds likeanother but though.It's a no, it's avery good thing to do.Okay.But the problemis often syncing.So, with a lot of optimization,and this is, it's a more, it'sa bigger picture question.When do you optimize?And how, do you, do you justmanually optimize or do you puta procedure in place that meansyou don't have to re-optimizewhen things change?Let's maybe start at the fact,what would you optimize?Because I'm usually justdropping the font that I wantin my project and belike, I'm going to goor use Google Fonts.So, well, Google Fonts doesactually apply loads ofoptimizations for you.Easy, I knew that.Well, you know,it's not a bad choice.I do think thereare better options.Okay.But, on top of Google Fonts.But the kinds of things youwant to optimizeare, so the format.So, you can have bigger fileformats, smaller ones.Different browsers supportdifferent formats.But these days, almost everybrowser supports WOFF2which is great.It used to be that things werevery complicated.I do remember that.Oh.And, and then once you have thefile, the font file, you havedifferent font faces.Mm-hmm.Bold, italic.You also have differentcharacter sets.So, you might have your sort ofWestern European certainaccents involved,but there are lotsmore characters.So, how full are you going toget with your font?Yeah.And if you are using a font forsome fancy custom headline, oryour sort of brand font,you probably, you're notrendering pages of text.You don't, you probably needvery few characters, actuallymaybe even fewerthan a normal one.And, and, and so there'sactually a technique to addressthat called fontsubsetting, whereyou basically create a custombuild of the font.Interesting.With just thecharacters you need.So, you mentionedfont subsetting.Yes.How does this work?I, do you say like, oh, hereare those 20 characters that Iuse, please build a font withthat, or?Exactly.Now, youmentioned Google Fonts.Google Fontsactually does this.You can pass the character setin the query string to GoogleFonts, and just,it will generateon the fly a font with justthose characters in it.That's pretty cool.I didn't know that.But even if you don't do that,it's possible touse something called,what you canpass Unicode range.And basically, in a font facedeclaration in CSS, you say,here's the file for formatWOFF2.Here's the file for format WOFF,just WOFF, here's the TTF.This is going tobe for the bold.This is going to be for, butthen you can say, and it'sgoing to be forthese characters,for Unicode characters.So already, Google Fonts willgenerate a CSS file, which haslots of different font filesfor different Unicode ranges.And when the browser encounterssomething, a declaration likethat, any fontface declaration,it's information that it thenuses to decidewhen to fetch font.It doesn't do anythingwith it straight away.Okay.So what it will do is when itencounters a character in thatUnicode range that has thatfont applied to it, then itwill dynamically, then it willrequest that font file.Oh, okay.So, well, but I mean, to answeryour question, yes, if you'resubsetting afont, you basicallyjust, you run a command on thefont, and it strips out all ofthe charactersthat aren't in it.It's not always legal. Sodifferent fonts have differentlicenses. And Ithink we often don't,we sort of have a feeling likefonts are free, right?A little bit.They're out there, unlessyou've paid for it, or unlessyou've, but youknow, there are a lotof different licenses. You canhave a license to use it inprint media, butnot online. You havea license to use it online,but, and you might not havelicense to subset afont. So you have to bevery, very careful before you,particularly if there's any,this is in a commercial way,and you're using the site, youknow, you don't, you don't wantto do anythingthat might put youafoul of that.How, how do you tackle likethis licensing topic? Like, Ithink Google fontsdoes share the licensefor the font where you can lookand read through it. But inothercircumstances, like if you're notusing Google fonts, how do youapproach making sure that thelicense isviable for what you'redoing with it?It's difficult. It depends whoyou are, like what kind ofproject you are as well. So,you know, a lot of people areusing these in their privatewebsites. A lotof platforms have alicense, a single license thatyou can read that spells outsome key conditionsfor the server. Sothere's another one, fontshare, font source, there are alot of CDNs likethat. Adobe has a very,very restrictive license. So doread that if you're ever usingit. But yes, youwant to check. AndI mean, reading legal documentsis hard, no matter what it'sabout, whetherit's about fonts orsomething else. But the keything is you don'twant to get it wrong.Yes. I do remember that, right?That you do have a legalbackground though. So,yeah.Okay. This is not coming out ofnowhere, right?I said, yes, I studied law.Okay. That's what I thought.Yeah.But you also did in between,you did some consulting, right?So did you ever run into,or also now in your role as aNuxt team leader,you ever run intoperformance related issues thatare introducedby fonts in a way?Absolutely. So there are lotsof potential pitfalls. And someare actually caused bytrying to makethings more performant.Interesting. I cantotally see that already.So the first obvious one, whichyou already talked about is afont which is too big.Yeah.And that is, or maybe you, ormaybe even more than that,overuse of web fonts. Becausealways consider,can you get away with systemfonts? Because they are somereally nicedefaults cross platform.But then when you do use webfonts, you, I mean, you canjust picksomething that is too big.So that is something you'lljust have to look at and seewhether it's worthit. But people also dothings like preload web fonts.And when they preload a font,the font, itbasically bypasses thebrowser's normal mechanism ofdeciding when to load it.Because the browser normally,which for good reasons, becausethe browser normally loads aweb font quitelate in the cycle.So you have the HTML, you havethe CSS. Now as the, so the,you, without theCSS, you don't knowwhether to load a web font. Butyou also don't know whether toload the web fontuntil you have theHTML. And in particular, untilyou know whether the selectorin the CSSapplies to the, the nodein the, in the element in theDOM. And so it's at that pointthat you startloading. But this actuallycan be quite late on in theprocess. And wouldn't it benice if there, if there's notso much of a gapbetween loading with a fallbackfont, and then webfont coming in. Right.So people sometimes think,rightly, let's get the browsergoing sooner. Yes.And so they'll add a preloadlink, but this is where it goeswrong. Peoplepreload not just the,so imagine this is your page,you might not use every fontface, you mightnot use every weight,so you might have no italics,just bold on this page, becauseit's a heading,but you've preloadedmore. Or you might think, youmight preload the wrong file ofthe font format.Yeah. So you mightpreload the WOFF, but thebrowser is not going to pickit, it's going to pick the WAFtoo. So you mighthave this scenario, and I'veseen it where you look at thenetwork tab, andthere's lots of networkactivity, and the fonts aretotally unused. Yeah. I thinkit would beinteresting if the browserprinted the same warning. Idon't think the browser doesprint this warning,I should know that.I'm pretty sure I've done thatand not seen a warning. Becausethe browser will tell you,the dev tools will say, hey,this site preloaded thisJavaScript, and itwasn't used, right? But Idon't think it does it for webfonts. The thing that I'mwondering now, ifyou don't preload it,can you not run into layoutshifts to some extent? I mean,not in a dramaticway of you're having anentire section that you'reloading, but the size of thefont will be different ifyou're using a systemfont, or you're starting with asystem font, and then you'reswitching to whatever you have.Oh, yes. I mean, that's myleast favorite negative feelingabout it. So I mean, obviously,a slow website is terrible ifyou're trying to click around,it's notresponding. But the otherthing is when you're loading asite, and then it changes. Itwould be like alittle jitter if thefont is just slightlydifferent. Yeah. But I mean, itcan be more, because if a font,if you go from, it can suddenlyadd another line. It's true.And that can be a lot bigger,even though it might just be alittle width difference. Andthere aresolutions for that. Sothe, yeah, some very, very,very cool, cool stuff. So it'spossible to takethe metrics of a font.So if you imagine a font fileis, I don't know, it's gothundreds of differentcharacters in it.It's, you know, it's got, it'sgot lots of data. But if youtake a look at all of those,you can extract some commonmetrics. So how high above theline does the topcharacter go? How lowdoes the lowest one go? Becausedifferent fonts would, and howwide is it onaverage? You can't,this isn't a perfect metric,but you can take an average ofa character set. Soyou can say of, say,the Roman alphabet, you know,like how many, what's theaverage width?Yeah. And so you can,you can come up with some, somemetrics and use those tocharacterize the font. And youcan characterizethem with just those fournumbers. And that can, that'senough to say, nowlet's, we can actuallymorph your system font to bethe same shape. Interesting. Soit's, it's notgoing to be exact.It's not, it's not going tolook the same, you know, ifit's Times New Romanand you're using Poppins,it's never going to look thesame, but we can make it takeup the same amountof space on the page.Mm-hmm. And as a width wise onaverage, take up the sameamount of space. Gotcha.Which means that you, you'llstill have a flash, but itwon't, shouldn't move thelayout quite so much.Right. Interesting. How?I, it sounds like very tediousmanual approach to like figurethat out. Well, oneanswer is probablygoing to be, we have a Nuxtmodule for that, but. So we do.Thank you. No, we have a Nuxtmodule for that,um, called Nuxt fonts, but thatNuxt module is actually builton. So it's, it'sa bit of a story,a bit of a saga. I have time.How much time do you have? Um,so, uh, so originally, um,I built a small library calledFontaine, which is a, uh,unplugging. So itruns in any, actually,I originally built it as a Nuxtmodule, but then I immediatelysaw this is, thisis silly to be doingthis because it could be usedby anyone. Why is it specificto Nuxt? So I, I pulled it out,um, and made it, it wasoriginally like Nuxt fontmetrics. So I pulled out andmade something calledFontaine. Um, and it basically,and by the way, this is not myidea, the, themetrics I, I, um,some very smart people atGoogle came up with this and I,uh, I sort of absorbed it andimplemented it.So I don't want you to thinkmore highly than you want. Um,but basically, uh,what it does is itlooks in the CSS for the fontfamily you're using, uh, andthen it adds somemetrics. So it says,okay, so if you're using, uh, Idon't know, um, Nonito. So, uh,and why not? Andwhy not? That'slegitimate. You should feel noguilt. I don't care. Um, and soyou're using that font. And sowe're going to add,a, um, another font facedeclaration next to it. So youhave the Nonito fontface, and then you havelike, Nonito fallback. And itwill have, instead of, uh, the,the source being aweb font, it will havea source being your local, uh,font. Um, and it will have somefont metrics thatwe can apply to it.So we can basically, we havethings like a scent override,scent override, size adjust.Mm-hmm.New CSS properties that aren'tsupported by every browser, butthis can be a, uh,progressive enhancement becauseit doesn't harm anything ifyou're using anolder browser. Itjust benefits a browser thatdoes support it. Uh, and so wecan generate that,that, uh, font face.And then in, when you'rerendering the, um, thecomponent, um, oh,the, the component.Clearly, when we're, when we'rerendering that, that node inthe DOM, that's, that's Lecter,we can say the font family isgoing to be first our web font,comma, our fallback,and then, uh, whatever else.And so the browser says, okay,right, we needthis font. But whilewe're getting it, we're goingto render it in the fallbackfont. Um, and sothe browser then fallsonto the, the, the value ofmetrics we've provided, shapesthe system font to bethe right shape. Andthen when the, in thebackground, when the web fontis downloaded, the browser thenswaps across. Now,you can control that totallywith, um, another CSS propertywhere you basicallysay, uh, font display,when do we display the font? Ifit takes too long, we maybeskip displayingthe web font. Um,you can block rendering textuntil the web font downloads,but mostly peoplejust do swap. Soyou just, when it downloads,you change it across. And thatmeans that there's nota huge jerk when thathappens. I do have a questionabout this because I, I'm wellaware that I'm not the mostwell-versed in CSS universe,but how do you learn thosethings? Is there like afonts.google.comwhere they list all thosethings here, like the 20 bestresources about fontsor how, how do you getthat knowledge? Because I'm inthe, I'm doing web developmentnow for more than10 years. And otherthan like, well, let's go toGoogle fonts and take them fromthere. Um, I didn'tbother much more aboutthat. So how and where do youget that knowledge? Well, it'svery much notmine. I mean, I just,well, you still have thatknowledge now. So somewherethere must be auniversal resourcelike Wikipedia or somethingwhere they tell you, here'severything you needto know about fonts.So this wasn't what I did, butthere are some great resourcesout there at the moment. Soperformance, uh, resources,articles, information,definitely check it out. Cool.Um, and I thinkthat's, it's really helpful.Okay. Uh, I spent a lot of timewith trial anderror, basically when Iwas building these things, notprobably knowing where to lookand, uh, andtrying a lot of thingsthat didn't work. And also Ihad some very clever ideas thatwere totally, theywere not clever ideas,but I thought they were veryclever at the time. I thought,ah, this will solve it all,you know, and, uh, and itdidn't work. So that sounds alittle bit likesprite driven development whereyou're like looking at thenetwork output or something,or you either were likebothered by the bundle size orby layout shifts.And we're like, okay,fonts are the issues, how I'mgoing to tackle that, where I'mmore just obliviousto that. I'm more like,huh, that's fine. I am. I am.Well, and definitely frictiondriven development is a veryreal thing for me,because when you, and I, I, Ifeel this all the time with,with Nuxt, forexample, you know,I often, I go for, for a longtime building, building, fixingfeature,whatever, dah, dah, dah,and then I'm like, okay, right.I'm going to build that sideproject. And so I,or I'm going to addthis feature to my website. Andthen, then you notice somethinglike, I can'tbelieve that's what'shappening. This is terrible.And you know, I do the final,uh, polish. Yeah. I'msure we all do. Right.The site is done. Now let's,let's get the metrics and youput it in and you're like,I can't believe, why am I notgetting a hundred? I should geta hundred. Right.I mean, we, we alldeserve hundreds on our sites.You know, that this is before,you know, anyonefrom marketing isadding any scripts into it. Itshould be a hundred. There's noreason for a websitenot to be all green.And so if it isn't, it meanseither the frameworkneeds a bug fixed orI need a fixed finance site.And yes, web fonts are a thingthat can be better.Interesting. In my veryextensive research that I didbefore coming tothis interview,I came across a concept calledvariable fonts that are gainingtraction to moresupport, like lessabout like performance, butmore offer a way to likeprovide rich typography andlike be more variablein the way you use it. What canyou tell me about that? Otherthan that's a very fancy name.They do. They do. Well, so thevariable fonts are, they'redefinitely not asolution for performance.Yeah.Unless you're using lots ofweights of the same font.Yeah.So because a variable font willalmost certainly be bigger thanany given likeweight of that font,but it will probably be smallerthan say two different weightsof the same font or three,like depending on it. But thething about variable fonts,which you know,is that they support more thanjust the normal access that wethink about. Wethink of two axes.We think of sort of italicity,you know, how slanted is thething. And wethink about weight,like how sort of chunky is thelatter. But variable fontssupport lots of differentthings. They cansupport formality, informality.So you can have a font whichgets like more likehandwriting and moreand like more like print.Interesting.And you can have fonts thatsort of change inother ways as well.So any kind of axis that youcan think of, you can implementin a variable font.Now, what does thatrealistically mean? You cananimate it like from a CSSpoint of view, you can animatesome of these things.That's fun, isn't it? I mean,probably not something for likethe body text on your website.If you have like a title orsomething like doing like thecalligraphy style for like a…Yeah.Yeah. I can totally see that.And it means, you know, well,anyway, it adds literallyadditionaldimensions to your ability toportray whatever you're tryingto communicate in your font.Sounds like a very landing pagemarketing thing though, notlike, oh, I'm working on astock ticker or something.I think, I think with when yougive people a lot of choice,particularly with web fonts,you have to be very carefulbecause there are only so manyfonts, like combinations thatwork, I think, for us.And it's very easy. I think Iknow I've done this myself tosort of end up with like,I've got five different fontweights of the same font justbecause I like thefont. And you know,why don't we do this? And thenit can create an almostsubconscious feeling ofbusyness or clutteron the website. And that's noteven mentioned, that's even ifit's just one font face.So one thing I'm verypassionate about isaccessibility. And I know for afact that fonts canbe more accessiblethan others, just from like theway it's written, it's easierto read and easier on the eye.But is there anything else thatpeople need to consider to belike, and I'm not even talkingabout like compliant with likespecs or something, just likemaking sure that thewebsite is generallyaccessible by supporting fontsin a specific way or something.So one thing that's worth beingaware of is that fonts can bedifferent sizes.at the same font size.So oftentimes accessibilityaudits will highlight thingsthat are related to the fontsize in pixels.But actually that doesn'tnecessarily mean thatthe font is readable.And this is obviouslyexacerbated by the fact of,is the font itself, is it acursive fantasy style fontor is it a chunkysans-serif font?And so that's not somethingthat can really beautomated, unfortunately.But there's definitely aquestion to be asked.So is my site readable?Thankfully, web fonts dosignificantlyimprove accessibilitycompared to some of theprevioustechnologies that existed,even like renderingimages, for example,which would obviously be aterrible, terriblething for accessibility.So I would be thinking aboutthe question of readability.But just also bearing in mindthat users who use your websitemay have their own preferencesfor their fontsthat they read your website in.Is there a wayto overwrite that?That is the design ofcascading style sheets.Is the idea that you would havebrowser vendors' preferences,website makers' preferences,users' preferences.And the users' preferencestrump the others.And that is somethingthat we can often feela bit annoyed about.We feel like asdevelopers, we are in charge.But we're actually not incharge of how ourwebsites render.We have a lot of control.But at the end of the day,there are things users can do.And changing fonts is one ofprobably the thingswe should mostexpect that they will do.Because a user might say,I want to view this website inAtkinson hyperlegible.Exactly.And that's what I want.And so if we create websitesthat are 100% to the pixel,they won't work if we're usinga different font.That's a question.I would, when you're testingyour website with fonts,so one, test if it works,what it's like ifthe font is blocked.So it can't be downloaded,or there's some issue with itfor whatever reason.Also, delete all copies of theweb font from your own system.Because sometimes people arebuilding a website,they have the font installed,it all displays perfectly,they deploy it,and they find that they neverincluded some font weight.They include one font weight,but not the other.It looked fine in their system,but it doesn't.Absolutely neverhappened to me.But also, try it with adifferent font.Because that issomething users will 100% do.And different font sizes also.A font size is another very,very basic accessibility thingthat people will set.And so, I mean, we all know theexperience ofzooming into a webpage,but there are other ways ofsetting font sizes too.So those aregood to be aware of.Never thought about that.So thank youvery much for that.So we briefly touched on this,but there's tosome extent a shift,or there used to be a shiftfrom system fontsto custom fonts,and now due to performance andlike bundle size issues,there's somewhat also a shiftback to system fonts.So you have like this kind of agap of likecreativity versus performance.Like how, other than like yourfancy Nuxt trick,if you don't haveNuxt or Fontaine,where would youstand on that spectrum?Well, asterisk, I want to saysomething about that.But, I mean, I think that,I think customweb fonts are great.I mean, don't pick them justbecause you have to,but I don't think people dopick web fonts justbecause they have to.I think it's a way ofexpressingindividuality and feel,and that's areally good reason.Yeah.I mean, but obviously,you can rein yourself in andmake good choiceswhen you're doing that.But about Fontaine,like it works in Next.js,it works in Astro,it works in DocuSaurus,it's an unplugging,which means that it supportsalmost any bundler.I mean, if you're not bundlingyour app at all,there are also websites thatwill calculate themetrics for you as well.So it is possibleto do it manually.There's also another,there's also,so there is a Nuxt module thatwraps everything up.In the Nuxt ecosystem.And the Nuxt module,it gave me so muchsatisfaction to build,because literally the onlyconfiguration a user has to doin order to usea custom web fontis write font family,the name of thecustom web font.They just write CSS.Okay.And Nuxt fonts detects that.It queries,I built anotherpackage called Unifont,which is a single unifiedinterface to thedifferent font CDNs,like Google Fonts,and so on.And so it has a way of saying,hey,give me Poppins.And Unifont,it checks the registry,says,okay,here's the data.Nuxt fonts downloads the fontto the project.So it's first party,not served from a third party.Nice.So no foul withGerman privacy laws,for example.So it's firstparty in the project,no DNS pre-connect issues.It injects theCSS into your CSS,so it's not a separate request.It hashes the fonts,and it adds in thefont size overridesto make sure that the fallbackis the same size asthe font you're using.It does all ofthat automatically,so the user neverhas to touch a thing.But,no,no,go on,what are you?I want to hook on tothe CDN thing on that,but no,you first.But,this was obviously,this was so much fun.So I loved it,and it was so much fun to demo,and really honestly,I felt so proud of it,because it was,you know,the little babyout in the world,and like bringing joy.But then,a couple of other frameworksstarted to investigate,and the reasonthat underlying toolswere separated outis so people could do this.So other frameworks said,hey,we'd like to do the same.I said,great,we've got the tools.Well,there is a fantastic,amazing team from the Qwik teamcontacted me and said,hey,we'd like to do it too.Can we ask you some questions?I've seen pictures on that.Okay.Yep.And so,great,I said,and we had a chat.They went away,and theybasically took Nuxt fonts,and they removed all the codethat was related to Nuxt,and said,actually,this works.Can we,so right now,I've been so,so slow on this,but I need to refactor it,but basically,Nuxt fonts is goingto become agnostic.And it's going to workwith any framework,any Vite-based framework.That's pretty cool.So it's going to be Vite font?Well,it's going to be,it's going to be something.That's pretty cool.On that,so if I imagine you have like,you said yousupport multiple CDNs.Yeah.There must be some kind ofprioritization where you say,hey, try this one first becausethey're just betterthan the other ones.Then go to the next one.I would at least assume thatthat's kind oflike the behavior.Which one is the best?To put it very blunt.So the way it works is that ithas this conceptof font providers.And you can writeyour own as well.Sounds very Java.So provider, exactly.Well, basically,it's just a file.And it has a sort of like setupfunction, which iswhen it gets the registry.And then it has anotherfunction, which you can callit, say, hey, giveme your whatever.So when you configure this inyour project in Nuxt Fonts,there's also one, by the way,which just looks inyour own public folder.So if you just copy a font inthere, then Nuxt Fonts will dowhatever with that.It won't hit a CDN.You can granularly disableindividual ones.You can provide your ownprioritization.So it will do it in whateverorder you want.By default, it...I'm waiting for the but.There's no but.By default, it hitsGoogle Fonts first.That's the firstone in the list.But you said at the beginningit's not the best.Font CDN?Google Fonts is great.But I just think there arebetter options than fetching atruntime from a CDN.Oh, I see what you're saying.So I think the better choice isto include it first party inyour build as an asset.Because immediately what youhave, the moment you have athird party, andI think so manypeople have probablystruggled with this.They will use Google Fonts andthen they will go to GoogleLighthouse and say, show me mywebsite.Google Lighthouse will be like,well, consideryour cache headers.They could be longer.And then they'll say, look atthis file from Google Fonts.And people are like, do youtalk to each other?Which is not like, there arelegitimate reasons for this.And there's notactually a problem here.But it does feel a bit strange,doesn't it, whenyou get that warning.So there are problems that willbe solved by includingsomething as an immutable assetin your own deployment.Actually, now that we talkabout this particular, everytime when I'mtroubleshooting issuesrelated to font, I think it'sreally hard to deduct what fontis applied right now.Particularly if you havefallback fonts andthose kind of things.Because it just says what fontface is applied, where it'ssaying, by defaultit loads OpenSans.If that's not there,then it tries Enter.If that's not there.So how do you tackle that?You seem smarter than I am.I'm not sure.So in DevTools, you should beable to see what font isapplied to a selector.So it may be adifferent DevTools.You might need to goto the Font DevTools.Okay.There are Font DevTools.There are Font DevTools.So basically, if you're lookingat your normal layout orsomething like that, you'll seeyour DOM nodes andyou click on them.And then you'll see the CSS.Exactly.Yeah?And so that will say FontFamily, whatever.Exactly.Right.Not helpful.But there is another Font Panelthat will show you what font isbeing applied to the givenselector and also which fontsare available on the page.And also, I should say, Firefoxhas great DevTools on fonts.Okay.So it's maybe worth alsochecking those.So there are somereally helpful tools.And then if you do want tostart debugging this, trygranular network overrideswhere if you go into yournetwork panel and look at thefonts, you canblock fonts one by one.So you can say, okay, let's seewhat happens if wedon't have that font.Because often if you want tosay debug the loading state ofthe font, it's very difficultto do thatbecause it's instant.And even if you slow yournetwork down, it'sstill going to time out.But if you actually block therequests to the font files, youcan get, okay, this isauthentically what the loadingstate is going to look like.And now I can then turn thatoff and see what they're real.So that's a veryuseful tool as well.Yeah, I didn't know that.So today I learned.I'm glad.This was a great conversation.It was worth it for you.Yeah, absolutely.I always love talking to you,but this was veryworth it for me.Because I always, as you said,like looked at the CSS and Iwas like, yeah,this is useless.It's not doing anything for me.I know which font faces apply,but it's not doing anything.Glad.Thank you.So.I think we touched on this tosome extent, but yourrecommendation would basicallybe at any given time, and thatsounded like that's what you'redoing with Nuxt,is use local fonts.So at compile time, you'rebasically, even if you're usinga CDN, you're copying the assetand applying theCSS accordingly.So if you would have to, yourstrategy would always bebasically localfirst in that sense.Yes. I think your font shouldbe an asset that is, itshouldn't be part of your buildprobably, because it doesn'tneed to be changed.You're probably not applyingany transforms to the font.I don't.Unless you're subsetting it.But even that, so you probablydon't want to be transformingit, but it still should be,yes, deployed with your site,ideally, I think, as part ofyour build asset.So onto whatever CDN you'reusing for your JavaScript.Did you ever come to thescenario where you had, Icannot think about it, butusually you don't want toinclude assets as part of yourbuild if you want to be verydynamic with them, where youwant to replace them and don'twant to redeploythe entire site.This would be one scenariowhere a local CDN, forinstance, could make sense.Is there anything that you haveencountered something like thatwhere someone is saying, I wantto change my, I mean, likeGoogle does it to some extentwhere they're like,doing like the little widgetsor something, and they changelike on a regular basis.Have you ever come to thescenario where you were like,okay, we deploy our websiteonce a month, but we change ourfont weekly based onthe mood of the team?So, in my experience, fonts arevery rarely changed.Yeah, that's what I think.And so they're one of thesafest things to cache.Yeah.And the, I mean, you can,basically, I would cache themas immutable artifacts and thenchange the name.And you can change the namewith a hash of the contents ifyou expect thecontents to change.That's something that obviouslyworks best in a build stepwhere you're basically able,which Nuxt fonts,for example, does.Shocked.But also, I mean, there wouldbe lots of otherways of doing that.So, I would say, like, you'renot looking for the same filename, you know,public sans dot woff.You're going to want some kindof character, something inthere that you can change whenthe contents change and thenjust cache it asan immutable asset.So, one thing I'm alsowondering, because, I mean, atthis time we're in, it's notuncommon that you want to have,like, your site to be verymultilanguage or multilingual.So, you might need also specialcharacters and then you'realso, depending on thecountries you want to support,you have, like, right to left,text that goesfrom right to left.Or even text thatgoes from top to bottom.But that, so, I mean, that, ifyou're sticking with the samefont, then your character setis, like, massive.Yes.How do you handle, like, thescenario of, like, I'm Googleand have my website running in260-something countries?190 countries?190-something countries?195?I think so.I don't know howmany countries Google.I would assume all of them.All of them.Yes, exactly.Yeah, no, quite right.So, I think Unicode ranges areour frontier, because you can,now, it doesn't address theissue of testing it and makingsure that your site doesdisplay properly, right?So, and, you know, it'spossible to have differentfonts fordifferent character sets.You know, you could do that.But a lot of the fonts thatpeople would want, so, thereare fonts that are out therethat are basically niche fontsthat probably have a verylimited set character ranges,but they have sort of veryinteresting characters.So, people might use those forheadings and things like that.Yeah.Probably not.They can get away with using itin the body for aparticular language.The number of fonts, if you'resaying, like, I want everylanguage in the world tosupport this font.Yes.There are many fewer of those.And so, you're restricted inyour choices basedon the availability.But once you've picked a fontthat you feel does support allthe characters you'll want todisplay, then it's the Unicoderanges which are your friend.So, you're effectivelysplitting the font upinto lots of files.Mm-hmm.So, a user from India is goingto get a different set of fontfiles downloaded than a userfrom Spain, thana user from China.Okay.And so, that is, and thebrowser just doesthat very effortlessly.So, you don't have to put a lotof, as long as they're split upand you provide the correctUnicode ranges,it's just done for you.Okay.Interesting.There's one topic in regards tofonts that kind of similarlytrigger me like enums do inTypeScript, andthat's ligatures.Ah.So, what's your opinion?I am not, I think I'm probably,well, so I have,I love ligatures.I think they arewonderful, beautiful.They're works of art.They just make me happier.That's, I'm glad to hear that.But, you know, I also, the fontI use in my editor, I've hadpeople tell methey hate it so much.But I think it's not surprisingbecause fontsare very personal.That's true.And what you like to see, andI've even been through a rangeof different fonts.At one time, Iused JetBrains Mono.Yeah, that's great one.It's a beautiful font.And then, and you get, and Ifind the same tobe true of music.Yeah.You listen to somethingeverywhere, and then you'resuddenly tired of it, and youuse something else, you know.And then you come back to it,and you say, oh,this is wonderful.How did I, why didI ever tire of this?So, it's very interesting fontsand preference.So, not sure if you know that,but you basically aregetting used to music.So, if you listen to something,even if you're at thebeginning, say, you'reabsolutely hating it, like,your ear eventuallywill get used to it.Do you think that'sthe same for fonts?I do.Because, well, ligatures stillis not growing on me.I've had to lookat them quite a lot.But I feel, it feelsoppositional to me.It feels personal now.Could be.You're never going to be wonover by asweet-looking ligature.You know, it's not, you're notgoing to think, goodness me, Ilove those three linesin front of each other.Yeah, no, I absolutely don't.Well, Daniel, it was, asalways, really nice to talk toyou about those things.And I do want to use this timeto thank you personally foreverything you'redoing in the Nuxt ecosystem,but also the broader impactthat has on other communities,like Fontaine and Unifont.Yes.Thank you.So, I really appreciate youreffort, and I think that's veryimpressive whatyou're doing for the,not just for Nuxt, which isalready impressive, but for thebroader ecosystem.So, thank you, and thank youfor joining me forthis cup of coffee.It's a pleasure.Thank you so much, and thanksto you listening.See you next time.