These font stacks will improve your site performance

[@KevinPowell]

If you're going to complain that we need nice fonts for any range of reasons, please watch to the end before jumping to conclusions, because I do address this, including a nice compromise to using both system and web fonts.

[@ahabion]

When I worked on an international brand's website and had to support multiple languages, we had to conditionally load different font-family stacks based on that locale. Depending on the locale, a fall back system font may not always be the best solution as that font might not have the correct glyphs for that language.

[@tonybowen455]

This was amazing. It always killed me using custom fonts because of the bloat, but everyone is doing it on every proj and design. This video makes me feel so much better. This def could be a short with a clickbait title just to get the info out to people that think they already know about fonts.

[@mrjohncrumpton]

Ok, I'll watch to the end.

[@rayskinner4289]

Convincing designers to use System Fonts is a scary proposal.

[@rogermiller5411]

it's impossible. it's like asking a pig falling from the top of golden state bridge to live

[@gileee]

It makes sense for the first you see in the center of your home page to be a predictable font and weight. Other than that I wouldn't even tell them I'm using a different font.

[@xbsidesx]

We need different things in the web. Does anyone remember how many websites resembled bootstrap back in the day? Not nice. Difference is key.

[@CottidaeSEA]

​@@xbsidesx You say that, but most people don't care. Yes, variety can be nice, but just having a decent font is generally enough.

[@dankierson]

I guess there's no point in advocating custom designed fonts outside of wordmarks 😉

[@jimfilbert1928]

It took me until today to realize Kevin is saying “hello my front-end friends” and not “hello my friend and friends” and I’ve watched all of his videos.

[@TylerTylerTylerTylerTyler]

WHAT

[@diggie72]

It's because of the closed captions that I realized too.

Mind. Blown.

[@Novacification]

Whaaaat? I swear he never said that in any other videos! And if he did it's because he just went back and changed it!

[@ollio9582]

That is not an option. The corporate font is a very (most?) important designelement. Also we selfhost the (google)fonts and always get a 100% pagespeed (untill the customer wants 3rd party shit, youtube or ads) Love your content!

[@KevinPowell]

If it's a single font that gets used across the entire site, 100% it's fine. The problem is when you have 2-3 different fonts, each with 4+ weights and italics mixed in, that things start to get dicy, and the body text and small things are probably fine being system-ui, with larger text being a custom or web font that has some personality.

[@LuBre]

@@KevinPowell3 different fonts with multiple weights and italics on a single website feel like a design issue, to be honest. In any case you can convert them to WOFF2 and then Base64. By embedding everything in the css file you will instantly fix any issue (FOUT above anything else).

[@hyperprotagonist]

Typography doesn’t matter to devs. Working with brand agencies for 15 years, I can tell you it absolutely matters. Also, system ui fonts are not chosen willy nilly. The system itself is brand driven.

[@KevinPowell]

Well aware they aren't picked willy nilly, which is why they're a nice choice, as they're nice fonts :) I still think going with a branded font for the headings and large sizes, and a system font for body text is a really nice compromise. I do realize it can be an uphill battle with designers tho :D

[@hyperprotagonist]

@@KevinPowell Agree. Just to be clear, my point is seen from a brand/product perspective. 9/10 times a brand will stay on bran therefore system fonts are never a compromise. For the average app or general use case, devs can go wild.

[@chrisicotec7652]

what i often seee with devs and typography is they dont change the default line-heights and that makes even the best text look like shit

[@PicSta]

I think there is only one decision possible and either you go down the optimized speed route or the designer's route who hand pick fonts to match brands and design aspects of the clients. Means for each project you have to consider what the client wants, if they are after best page performance, then of course a system-ui font will maybe the right thing.

[@walshsr]

"The system itself is brand driven." Yeah, some else's brand.

[@dogoku]

Nice is theory and for personal projects, but I have yet to find a designer that would accept having different fonts on different platforms

[@KevinPowell]

Ask them why it's okay for the layout to be different on different devices then 😅.

[@АлександрГерасимов-с3щ]

Next.js did great thing on their next/font package. It allows to automatically self host a font, but also provides automatic zero shift fallback for when main font has not loaded yet

[@Slate245Ivanovo]

I'm really torn on this take. On one hand, I get it, page loads are important, and no one really cares about font. But, on the other hand, the WP example contradicts the logic of the video! If you have another font for headings or branding, you will get layout shifts. So, what's the gain here? Also, I've had to work on building dashboards and tables, and let me tell you, when you are trying to squeeze as much information on a page with lots of elements of fixed size, those line lengths do become really important.

[@studiosoftmorecambe6879]

Like you say Kevin, 'Nobody cares', so why jump through all the hoops. Store your chosen font on your own server, load it from there and all the loading speed issues go away. Your entire team reference the same font and everything on the site is uniform. The alternative is trust someone else's server and put up with slow loading and only partial control.

[@StefanHolmes]

Well done calling out the GDPR issue with Google Fonts!

[@mosesjurassic3686]

This is not an issue if the fonts are hosted on your own server (which is super simple to do).

[@guerra_dos_bichos]

Hard pass on this one... we fought for that control in our applications for good reason. Leaving the OS to choose how such a critical point typography will be handled is asking for trouble. I had my fair share of smart asses from marketing trying their Grubby hands on my projects or a nitpick Steve Jobs wanna be c level executive calling me Sunday to fix something, so I'll stay my hand and keep using imported fonts

[@economicist2011]

Will the "modern font stacks" be effective if the user has altered their system fonts? I know obsessing about edge cases is counterproductive, but I've seen enough SMS screenshots on Reddit to know that some people are psychotic enough to set up some ghastly script font as the default.

[@jmagrippis]

I love the Wordpress tip / insight in the end, a “fancy” font for the “brand” and then system fonts for the rest. You could even just bring the letters you need if you’ll just use it for a logo and 3 words 😛 I’ll combo the tip in for designers, I’ve been saying “you get one font, but it’s variable so all the weights”, with “you get one font + system fonts” and see how it goes 😄

[@kacCid]

Great video as always! I'm a developer for market research software. I know it's kind of a niche, but I have to deal with cross browser/device consistency for the end-end user (e.g. survey participants) in a very detailed way everyday. It really comes down to things like the width of actual labels/strings sometimes. Because how things look, oc can have an effect on answer behavior. In professional market research you want to have absolutely perfect comparable datasets between different users (oc filtered to at least the devices used). Answer options: Very unsatisfied _just looks different than_ Very unsatisfied

[@sharkinahat]

There's also That One Guy that has Exocet set as the system font, but that falls into the self inflicted damage category.

[@Stoney_Eagle]

I want all the fonts, screw the user 😂😂

[@alexanderthacker3084]

As someone who uses Ubuntu mainly, I tested it out to see what fonts are used. system-ui becomes the "Ubuntu" font which makes sense and is a good font, but sans-serif becomes "Noto Sans" which I think is much nicer.

[@KevinPowell]

Ah, that's interesting 🙂

[@mohansharma1989]

Kevin, is there any right way to use icons as well from font awesome, kit or local install or cdn?

[@RyanOlton]

The designer side of my brain is screaming nope, the developer side likes that Wordpress compromise lol

[@i3looi2]

On the other hand , sites that are based on recurrent user-login/visits can boast the caching. So first load it's slow but from there on , everything is smooth because most fonts and resources are cached.

[@KevinPowell]

Totally! Just gotta make sure that first time isn't terrible tho 😅

[@soviut303]

Variable fonts help reduce the number of weights needed. This might be a good follow up video.

[@evasilvertant]

It depends on how many weights you make use of in the first place. For my website, I considered switching to the variable version of Work Sans, but given that I use only four weights, at this point it was better to optimize static fonts. I would love to exert more control over exactly what weight is served depending on the size though, so I’m pretty sure I will switch to variable at some point. But just to say, variable fonts aren’t necessarily the better choice. But you could get into subsetting, where you exclude the weight ranges and possibly even character sets from the variable font that you don’t need, thus making the variable font as lean as possible.

[@soviut303]

@@evasilvertant Typically a variable weight font only needs two weights and can interpolate the rest.

[@evasilvertant]

@@soviut303 Oh right, subsetting cuts out characters, not part of the weight range.

[@etsi0367]

I use the default one in tailwindcss: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif

[@globalfunseeker6733]

Thanks Kevin for another wonderful video tutorial, and the link to modernfontstacks. I compared the most commonly used sans-serif fonts (lato, roboto, raleway, open-sans, etc.) on a page of repeating paragraphs to determine which was more legible and better suited for body text. I found open sans to be the best, so that is the font I use. But my font stack also includes the system fonts you mentioned. I also add the system fonts with my @font-face declaration (see below). I agree with your assessment. Most people don't care and wouldn't know one font from another. Header fonts, for obvious reasons, are different. Thanks. Mark @font-face { font-family: 'Open Sans'; font-weight: 400; src: local('system-ui,-apple-system, BlinkMacSystemFont, serif'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'); font-display: swap; }

[@AleksanderFimreite]

I'm currently working on migrating my website from a 3rd party to a self-hosted setup. And I have not bothered picking a font yet, so this showed up in a really convenient time for me. Despite knowing my way around css, I'm not really a web developer. So, I really fall short on the awareness of what is possible here. I feel your channel is providing me with lots of useful knowledge to build up my arsenal. Thanks.

[@MisterConscio]

You can always download your fonts instead of relying on CDNs, but i also love "system-ui", always use it on my css reset.

[@crowmanhusk5644]

Thanks for this very useful video. The windows font family Segoe is pronounced "Sea Go". I only know this because I watched a Linus Boman video about Microsoft fonts. 👍

[@namakudamono]

Another great KZbinr!

[@BalearicS0ul]

If system-ui is good enough for Kevin, then it is also good enough for my clients.

[@PRICEX]

It’s good enough most of the time. I build small sites for businesses and I also design them. Most of the time I choose a system font and the client never notices. Would my design look somewhat better if I used a google font? Probably so. But most people don’t care as long as your site works and they can get information they need. All subjective though and depends on the type of site.

[@thetakburger7928]

Just tried system-ui on my project that used Inter. The difference is so minimal. Totally convinced. Thanks

[@jaybeedub]

I literally did this exact same thing. I'm definitely punting the Google Font after this discovery

[@acbeaumo]

I love that we've come full circle back to using font stacks.

[@mihao-runs]

2023 and page speed is still a thing LOL

[@ales.vaupotic]

I've been preaching this idea for years. If fonts are your selling point on site or app, then something is wrong with your product and you've got bigger problems than how the site looks. Nobody, really nobody, will turn down a good offer in system-ui. People don't discuss your fonts or compare them to another site. As long as copy is legible, they see beautiful images, a good price and CTAs.

[@be2wa]

For this one time watching your video I am surprised how you, as someone focused on the visual aspects of websites, seem to belittle the role of typography and the uniqueness of fonts. Even if "nobody cares" they still perceive subconsciously the effect of a certain typeface, get different feelings about what they are looking at based on the choice of type alone.

[@KevinPowell]

Typography is *super* important. I'm a typography nerd, and spent tons of time when I was in school learning about it on the side of my actual studies, which is why at the end, I talk about a compromise. The most important part of body text is that it's readable, and system fonts will accomplish that. Headings and larger text is going to have a bigger impact, even if it's subtle design choices. This also changes if you're using 1 font or 3 different fonts. If you have a single brand font with 2 weights and italic, then you're fine. If you have 2 or 3 fonts with 5 weights each plus italic for each of them... well, that's not really great for the web and some compromises probably need to be made.

[@be2wa]

@@KevinPowell thanks for the reply, it was the general feeling this video left in me, not arguing with performance side of things, which you know more about than me.

[@JosephCodette]

I always download (google) fonts , I don't know if it even saves that much loading time (I test with throttle ). I spend more time worrying / optimizing media then that kind of thing. It matters if your users are in a remote place, which is probably not the case for most people.

[@KevinPowell]

font optimization for the web can be a huge rabbit hole when it comes to subsetting fonts and other things. If you're using one font with a few weights, you're probably fine, it's when you have 2-3 different fonts, each with a few different weights and variations, that you start seeing some issues. And "remote places" can sometimes have better connections that crappy public wifi that a lot of people use all the time :D

[@nustaniel]

I really dislike system-ui since the font baseline is horrible with Segoe UI. It's actually a broken font and whoever pushed that as a system font should be smacked over the head. If you try to vertically align something using say Arial as a font, the basic top 50% translateY -50% or inset 0 margin auto will center the text more or less perfectly, but if you use system-ui, the Segoe UI you get on Windows machines will not visually vertically align to the middle, the font is not properly centered and you end up with visually misaligned text inside the container. That creates in example weird looking buttons where you have a larger whitespace on the top of the text compared to below it. Adjusting for the horrible Segoe UI alignment will break it for fonts that are actually centered, so that's a no-go. So I avoid it entirely. system-ui for in example an article text is fine, but for UI elements like buttons I would avoid it and stick with something like Arial that is on most computers and reliable.

[@LuBre]

Just convert the font to WOFF2 and then Base64. Finally, add the Base64 converted code to your CSS file. Problem solved. No more FOUT, rendering, or performance issues. Bonus: you will get perfect scores on Lighthouse.

[@Pfoffie]

I have been using sans-serif and serif for some time now. Thanks for telling me about system-ui

[@ApprendreSansNecessite]

The big problem I see with this is that the x-height and the eye / open of different fonts in a stack can change radically and that there is no way to pair a font with a scaling factor or something. I tend to decide of the base font-size of a font-face based on the way the font looks in order to maximize readability or effect.

[@ApprendreSansNecessite]

Actually I guess you can use getComputedStyle and a css variable. It would have to be a blocking script in the `head` or something

[@YuriLifeLove]

This entire time I thought the comma on the font-family was like addresses, and for each comma, it got more and more specific or the other way around... Something like: Asia, Japan, Tokyo, or something like that... Lol...

[@levsonc]

font-family stacks are usually over engineered. There is no sense to write “arial, sans-serif” or “courier new, monospace”. Arial and Courier New - are already default fonts for corresponding families, if present. Moreover, one can change default font in browser settings. So, I have great Source Code Pro font for monospace. And when I see shitty Courier New-that means that site authors were bad at declaring site fonts.

[@pxt0086]

Well done again @KevinPowell !! I respect the job of a designer; however bear in mind that you can have the prettiest website going around but if potential customers/clients don't hit on your site then you've lost the game!!

[@dorian0623]

Creating applications in my language -Korean- involves using alphabet-based words, giving the app a multilingual touch. I'm on the hunt for a font that can handle various languages with balanced dimensions, but the standard OS fonts aren't up to par. While performance is crucial, readability matters just as much. That's why I still can't overlook the web fonts.

[@KevinPowell]

The world of web typography is severly lacking once you get outside of Latin characters, sadly.

[@trapfethen]

I will say that if you stick to variable fonts, you can dramatically reduce the both the loading time and the bandwidth requirement of using web fonts; additionally, they also get you all the supported font weights, italics, and several other font effects that css can change.

[@willkanoff]

Okay. Now all landing pages in the world are going to look even more similar 😄. Where is all of this going to end up, I wonder?

[@KevinPowell]

Like I said near the end, a nice compromise is to use web fonts for headings and large fonts, while keeping system fonts for body copy.

[@HaraldEngels]

At may end up at having good content, attractive offers and well converting CTAs ...

[@DarrenbyDesign]

Thanks for posting this and helping me understand system UI more!

[@KevinPowell]

Thank you so much!

[@peterl0815]

I'm that designer who has issues with that quite a bid. I mean ... loading times ... I would first go for a variable font. Second everything as woff2 und third preload the font. I mean if you look at the average Wordpress site there is a sht load of js loaded without questioning this in any way but when it comes to fonts than convincing the designer to use system fonts necessary. If it's done right the font issue is no issue any more but you have to know what you are doing.

[@jvbndofvbnebe]

Besides webdev, i know to do Instagram templates, and choosing the right font is 90% of the overall appearance in them. with websites, it's also important to choose a good font

[@KevinPowell]

100%, but no one is going to notice the difference on the paragraph text. Headings, go with something nice and with personality 100%, which is what I talk about at the end

[@jvbndofvbnebe]

@@KevinPowell wow, i never expected you to answer any of my coments! And you're right: for paragrapgh text there's no need to look for a "perfect font", most fonts are easy enough to read, and tehre's no need to spend a lot of time thinking about which font to use for general text. Choosing a good font for large text and headings is very important, but there are some buts to this Websites aren't Instagram posts at the end of the day, so there are some differences, of course. for general text there's no need, most of the fonts are easy to read and people aren't going to stop looking your website if "your text font is simple". it might help at the end of the day, making the text easier to read another thing is that it helps with familiarity: instead of trying to "reinvent the wheel", i think it's important for websites to have a "basic structure" to help with navigation, and i think it also applies to fonts you mentioned that most websites use the system fonts, so using them for your headers would also help with that, creating a familiarity feeling that could also help with giving credibility to your website

[@SnoFitzroy]

Me who uses settings to force almost everything on my computer to be Cafeteria Black, Pico12, or BrianneTod (they're used in a game I like): 👁👄👁

[@devilreaper8543]

what do to suggest to get rid of unused css and js during website speed optimization when developer have use in high number of cdn and unnecessary local css and js....

[@erwinakv]

Variable font can also be an option to improve loading time. Not so fast as the system font stack, but a good tradeoff (style vs speed)

[@KevinPowell]

100%! Love variable fonts a lot, but you do need to be careful, I've seen a few that are insanely large. But in general, 100% agree that they're amazing :D

[@evasilvertant]

@@KevinPowell Subsetting is also an option; there are ways to exclude weights and even character sets from the variable font, to make it as lean as possible.

[@chrisicotec7652]

system-ui has been my go to font since watching you use it on a past unrelated tutorial

[@whatamiwitnessing1003]

You underestimate my autism. I will 100% notice if a font suddenly changes on a different device.

[@monkaSisLife]

I dont really get it, doesn't the Browser only load the Font weights that are used by the Site? I've seen this pretty much on every site i did, that if i only used regular and bold it only loads those 2 even if i put in more weights

[@2ovob4ehko]

8:00 Yes, my designer uses a paid Adobe application and chooses only paid Adobe fonts there. Asks why the fonts are not the same as in the design. And does not think about where I should take them.

[@faahkoo]

Bootstrap is everybody’s favorite? I actually hate it 🙈 but it’s personal preference 😅

[@utoddl]

Did you make the point that using system fonts makes your web pages look "right" or "at home" on the system? If so I missed it.

[@vothaison]

Not to mention, since most modern systems support multi languages, system fonts automatically support all languages as well.

[@ArieshBens]

How to apply your tutorial to a website? It seems like the video doesn't explain it in detail.

[@justingolden87]

System font stacks are awesome, they're super performant, and they make the user feel "at home" and like the site was designed for them/their device. However, if you work at a company with a brand identity, they would never allow you to use fonts that aren't their own. I'd suggest falling back to system and loading the correct fonts. For example, if you have a serif heading font and sans body font, use a system serif stack for headings and system sans stack for body, and then load fonts in quickly, but don't delay the page load.

[@nitrohite]

This is super insightful, specially your final point I think it's spot on. Thank you as always, Kevin!

[@Rust_Rust_Rust]

I wish. Unfortunately, my company's designers and clients would refuse to have fonts that are different for every device 😂

[@KevinPowell]

Then ask them why it's okay for users to have different layouts depending on what device they are on (mobile vs. desktop, etc) 😆 I've never understood the "but it needs to be pixel perfect" when no two users get the same experience anyway... but I also know how it goes.

[@Rust_Rust_Rust]

@@KevinPowell If you knew my company you would be eye rolling at every request from design. I get the usual it needs to be pixel perfect on a daily basis so much so that I've grown accustomed to it (spent a week making a button centered because a font that design chose renders differently across browsers 🙃)

[@SW-fh7he]

System prompt for Windows is not vertical central.

[@JimKernix]

What is the link for onepagelove that shows those websites - I can't find it?

[@MuteCoder]

Not bad, but it's a bit scary for a frontend developer. 😅

[@PegoSama]

Yes, with a 5G phone and a high-speed connection, the problem is downloading a couple of fonts. If there are 3 fonts with 4-5 different styles, it means there is bad graphic work behind it. Including a couple of fonts in a website is hardly a problem in 2023. And stop being obsessed with pagespeed.

[@KevinPowell]

Not everyone is on 5G though... from terrible public wifi in some areas, to bad connections at home, and of course, countries where old networks are still in place, and other scenarios where people simply have shoddy internet. It's great that a lot of people have access to fantastic internet, but it's not everyone. Even on a flagship phone on 5G, I see FOUT and FOIT issues on a lot of sites. Not always only because of the typography, but with other issues that slow the entire thing down (ads, images, etc), and with unoptimized fonts on top of that, it all comes together for a terrible experience. If it used a system font, even just for the body text, then at least that would be in place as everything else sorts itself out.

[@MrHubtech]

So paranoid about people complaining in the comments...lol

[@TheTanadu]

font design, then system ui fallback, then sans serif less is more

[@robertostringa9254]

Better not to use images either so there are fewer files to download...mmm

[@mattroddev]

Thank you for sharing. I love your channel.

[@pinnaclewd]

System UI in VS Code automaticaly gives: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

[@379rale]

The variable version of the font Figtree, when converted to WOFF2 is only 25 kb. Outfit is 30 kb. Self-host it, and enjoy

[@ExtoNov]

What alternatives do you think would be good if it's a non-Latin language? As a Korean, I think the options and methods you mentioned in the video are literaly impossible without webfont. Most non-Latin languages (especially in Asia) use Noto Sans by default (with using google fonts). Windows provides the default font-family for Korean, which is "Malgun Gothic." However, this font has only normal and bold weight :( Only a year or two ago, a Korean font called "Pretendard" was developed that pretends Mac's basic font.

[@stio_studio]

I fixed this by just adding the font to my asset sup domain. (It might have taken me 2-3 hours, to realize that the file google gives you, are a zip file😅)

[@nayte91350]

Hello Kevin! Thank you for this insight on fonts, this is a domain I don't know well about. You nailed it by speaking about Roboto, and how system-ui is an universal alternative to it: I usually use this font and with your video I can change it to the system one, saving few (kilo)bytes and the planet. I was wondering, because I can't find any convenient tool to compare: do you have such an alternative to Open sans ? That's the 2nd one I use with roboto, and if you have a way to mimic it for 0 bytes, I'm totally into it also! Anyway, thank you for your time and your videos!

[@USRFobiwan]

This 'loading' of fonts is probably a third world internet speed problem. Lighthouse does not calculate cached files into the score unless its more than 4 months old. I think since everyone has used the popular google fonts in websites, most of them are now variable fonts and much smaller, and user browsers already caching most of them. Unless you only visit a website once in a lifetime the loading speed is probably non existent for font files, compared to retina ready images on the website.

[@KevinPowell]

Thanks to privacy issues, you can't cross-catch files between sites, so even if everyone has Roboto cached from every other site they've been to that uses it, they get it again when they visit your site for the first time

[@Shaheer-xs5os]

Damn, That font really looks cool! thank you for recommending it, never realized that I could use system fonts like that...

[@treshi]

What about variable fonts, I like the idea of having to load only a single or at most two fonts that cover everything I could possibly want and more, as some fonts are really flexible when it comes to font-variation-settings. But yeah support isn't perfect either. But I like variable fonts.

[@kobi-kobsen]

I think that most modern sites use quite big copytext font-sizes and so it really makes a big difference what font on copytext you are using. I would see the difference evene standing 3m away from my screen.

[@AbdulhamidKwieder]

Hi dear Kevin! I really like your content. Can I know which Recording Program and Montage are you using to record the screenshot and the Video? Thanks.

[@trinkel8]

Oh my god such a refreshing point of view. Or, not so much refreshing, but to actually say it out loud. I think the heading compromise is a nice way to work around look vs feel.

[@toddgilbey3979]

What’s your views on Adobe Fonts? A good source or just as bad as Google fonts? 😅

[@KevinPowell]

I find them a bit slow tbh. I'm still using them for my personal site I think (it's been a long time, lol), but maybe they improved things since I last looked

[@dariorox1]

I've been self hosting google fonts since the gdpr bs arrived, but I'll give this a try when customers are not too mad about particular styles

[@ShaunLevett]

One thing I love is telling our designers who want a specific sans-serif body font “nobody is going to tell the difference”. 😂

[@PascalHorn]

system-ui has another advantage. The user recognizes the font immediately. It’s like, we don’t have to use custom JavaScript video players anymore, the user is used to recognize their video player from their browser of choice immediately. And to be honest, they are quite good. Good luck though to convince your customer or designer with that choice, though. 😏

[@erickhilario8782]

Does anyone know of a website where I can send you my current source and suggest the one that most resembles the native ones?

[@tristen_grant]

Use the font site Kevin mentioned and compare it to your current site/source. Use your eyes.

[@TommyTheMooch]

One of the best channels on KZbin for me. Don't let negative comments guide your content. They choose to be here and some people will always be too smart for us. Even when they're not.

[@RyanRampersad]

I work in enterprise. Getting product teams to care a little less about the body font of an internal webapp and care a little more about page weight and loading performance is so hard.

[@TomasMisura]

improving of performance is stuff i am currently to deal with. I'll try to implement the most of your advices and recommendations

[@KET0NES]

LOVE THIS. will spread this as my new gospel. you're so underrated

[@yamztv8938]

another subscriber her. i watch almost of your video and it help's me a lot on my projects as front-end developer

[@MaxWeir]

So great you’re covering things like this, I’d love to see a video on explaining and fixing issues on the upcoming Next Paint (INP) metric and with examples like say a slow carousel.

[@aleksandrshevchuk4354]

Thanks for the explanation! I think your video could also be useful for designers who trying to reinvent the interfaces instead of simplifying them.

[@The14Some1]

7:45 that's actually not true. I'm doing this whenever i notice the difference. The more prominent it becomes on sites you visit on a daily basis. Sometimes the difference in fonts dives me crazy.

[@tristen_grant]

Are you a designer?

[@The14Some1]

@@tristen_grant Not quite, I'm doing business analytics intermingled with some FE interface development on a daily basis.

[@lewis4929]

What about variable fonts? You only have to load in one file to get all font weights, and with a bit of a compression you can shrink this file down to under 100kb

[@tristen_grant]

Still slower than native fonts.

[@lewis4929]

@@tristen_grant of course. But you have less control and some are pretty ugly

[@JamShady]

Just wanted to let you know, support for "system-ui" is not perfect... ;)

[@wzt9376]

A dev solution that will never be accepted by designers lol 😅

[@tristen_grant]

I'm sure lots of designer used/accept this.

[@bmehder]

Sold! I also like it when Kevin gets a bit sassy sometimes. He's earned the right.

[@MudasirRazvi-vf3rx]

LOVE you my teacher you are css GOD Love from Pakistan

[@joyvideos1802]

I think nowadays we have internet at high speed, no need to worry about this?

[@tristen_grant]

Depends on where your site is visted. Not everywhere in the world has good internet.

[@vothaison]

Gotta try that "Cartel" font.

[@brokeloser]

Preloading fonts in the tag is a big unlock for LCP and CLS