9 ms·
Faster web fonts
- ggeorgovassilis 5y agoI haven't made up my mind about whether web fonts are a good or bad thing. On one had I understand the designer's desire to express themselves artistically (or even sometimes implement functionality that wouldn't be available otherwise), on the other hand I often feel more comfortable with my own font choices and am glad that Firefox lets me override most fonts with defaults.
- kbelder 5y agoI think web fonts are massively overused. Sticking with the user's configured selections are better unless there are very strong reasons you need to over-ride them. It's extra resources, time, and complexity spent on forcing something on the visitor that in most situations they don't want or care about.
- zzo38computer 5y agoI agree. (The document may specify what language the text is in and whether or not fix-pitch is wanted; the user settings should then be used to determine what font that is.) Actually, I generally would usually avoid CSS entirely, since the user's styles are generally more suitable. (The "font-display" setting is also a setting that the user might want to change even if font downloading is enabled. My idea of "meta-CSS" would give you this and many other things for free. Meta-CSS would not inherently allow the timing to be adjusted, but it is a feature that can be added too if it is wanted.) Another thing that I might want is to enable the document to specify its own fonts if it is SVG or PDF, but to disallow HTML documents from specifying their own fonts.
- iggldiggl 5y ago> Actually, I generally would usually avoid CSS entirely, since the user's styles are generally more suitable. I very much doubt that's true for the average user, who will simply be using the browser's built-in default – which to an not inconsiderable extent is rather constrained by backwards compatibility concerns rather than being truly optimised for usage as "the only stylesheet you'll ever need". Besides, even with a boring plain old homepage-and-definitively-not-a-web-app it's not too difficult to run into the limitations of what you can achieve without some custom styling even purely in terms of basic layouting and typography.
- vbernat 5y agoI always find builtin fonts difficult to pair when you want to use monospace for code. If you take Times New Roman and Courier New for example, Courier New is quite larger visually, so you would need to use a smaller point size for it. But how to do that when you need to handle fallbacks? On my blog, I am pairing Merriweather with a custom version of Iosevka to match x-height and ascendant height. I think this is less disturbing when reading.
- jraph 5y agoFor me, this is a bug of the OS or the browser. On my OS, Noto Sans is the default sans-serif font and Noto Mono the default monospace font and they pair impeccably. Whatever font you are telling my browser to use will probably be worse for me (at least because of the loading time, and because it is actually hard to match the readability of Noto in my opinion). It's unfortunate Courier New is both so badly different from the regular fonts (and so bad at all, by the way) and also the default on Windows.
- nine_k 5y agoCourier New, with all its unfortunate quirks, is there for a reason, AFAICT. It copies the typewriter font metrics. There are many situations where texts are measured by the number of "standard typewriter" characters and lines, established like 100 years ago. Using Courier New for code samples is not a great idea. I think it comes from the times when good monospace fonts did not yet exist. I always change this default, andvi wish browsers somehow stopped clinging to it.
- vbernat 5y agoUnfortunately, most people won't change their browser defaults. It doesn't mean they won't be annoyed by the bad visuals.
- 542458 5y agoI think this argument falls apart here: “the user's *configured* selections”. 99%+ of users don’t configure anything and just have the browser’s defaults. This isn’t because they love the defaults, it’s because they don’t know/care that you can configure things.
- waheoo 5y agoSo your argument for displaying sites in fonts users don't care about is that the user doesn't care about fonts? Why not just let system designers choose the fonts their users are subjected to by default. At least they seem to care more about accessibility than XYZ.coms marketing department.
- 542458 5y agoAs a user, I might not change the config because: * I don’t know there’s a config at all * I know there’s a config, but I don’t know enough about fonts to make a good choice * Most sites override my config anyways (unless I chose an even more aggressive config that breaks websites), so why would I care? * The idea of some site specifying a font does not bother me, even if it’s a web font that will cause an extra 25kb of download. For what it’s worth, I really like fonts and know my way around the Firefox config, but I honestly do not care enough to change the default font because of the last two items on that list.
- majewsky 5y ago* I know there's a config, but I'm not on my own machine * I know there's a config, but this is my work machine and corporate IT has blocked the browser prefs dialog via group policy
- prox 5y agoLong story short : designers don’t always build sites. With easy CMS solutions, content managers instead of designers, you get questionable font choices. It’s not as bad as the early days of Comic Sans, but there’s still a lot of work for typography experts out there.
- yannikyeo 5y agoStackoverflow is switching to use system font https://news.ycombinator.com/item?id=27063991 https://news.ycombinator.com/item?id=27063991 Other big site such as Github is using system font as well. It appears there is a trend to abandon web fonts.
- arkitaip 5y agoTwo don't make a trend when we're talking about billions of web sites. Typography it too important to abandon it in favor of whatever defaults Microsoft or Apple have enabled on their platforms.
- tdaltonc 5y agoGitHub and Stackoverflow are interesting cases from a webfont perspective. They have the benefit that most of their users are repeat visitors that means they'll likely have the designers prefered fonts cached from a previous visit. They also both need to support EVERYTHING. Could you imagine the HN posts if they didn't? "Github doesn't support U+25C8! This crashed my Rust server, invalidated my identity, and made my grandparents cry!" In that StackExchange post you linked to, they mentioned make their own branded web font. That's definitely what I would be advocating for if I were there. The case for Github making their own font is even stronger. Microsoft has a very good font team. Designing a family of brand fonts for GitHub would be a very cool project (How many brands care about their fixed width font as much as github?)
- lhorie 5y agoPersonally, as a user, I'm not going to a website to appreciate the owner's artistic sensibilities. IMHO, system fonts are perfectly readable; the trade-offs involved in a site owner imposing custom web fonts don't seem to take into account my priorities as a user.
- vlmutolo 5y agoA site using web fonts doesn't force the web client to use them. The user agent should be perfectly capable of replacing the site's font choices with its own and not even downloading the web fonts if it's known ahead of time that the user doesn't want them.
- tdaltonc 5y agoThe alternative isn't what you think it is. You might hope if web fonts were banished, designers would use system fonts. But there was a time before web fonts, what that's not what they did. They'd do their typesetting in photoshop/Illustrator and then upload images. That's the world we'd be going back to. You, personally, should be glad web fonts are a thing because it makes it easy for you to restyle them on your computer. If a world without web fonts that wouldn't be possible.
- bouke 5y agoOr even use Flash to do the rendering. There even was some library to do this for you.
- grishka 5y agoYeah I mean > This is a good base because it lets website visitors start reading your content right away They're already reading the content. The one job your website had has already been accomplished without the custom font. As this guy[1] said, you first serve what's essential for your website's functionality, and then you stop. [1] https://www.youtube.com/watch?v=iYpl0QVCr6U https://www.youtube.com/watch?v=iYpl0QVCr6U
- nicbou 5y agoIt's missing one of the biggest improvements: HTTP2 Push. It saves a lot of back and forth. You can also limit how many variants you use. On my website, I dont have bold + italic text, to avoid loading a font. My secondary font is only loaded in one variant. I also realised small performance gains by inlining my CSS (although HTTP2 Push negates the benefits). This only makes sense for smaller stylesheets though. Even then, fonts are one of the last performance bottlenecks on my tiny and fast website. That's only visible on absurdly slow connections.
- infensus 5y agohttps://news.ycombinator.com/item?id=25283971 https://news.ycombinator.com/item?id=25283971
- eyelidlessness 5y ago> It's missing one of the biggest improvements: HTTP2 Push. It saves a lot of back and forth. Worth noting that Push has been removed from Chrome, which likely means it’ll eventually go away everywhere else it’s implemented. > You can also limit how many variants you use. On my website, I dont have bold + italic text, to avoid loading a font. My secondary font is only loaded in one variant. This is definitely good advice. On my site, I only load one font, used only for headings. Body text certainly can benefit from custom fonts too. But IMO if your headings stand out and the rest of your design is strong with good line spacing, it doesn’t hurt to try out common web fonts or a system font stack for the body text. > I also realised small performance gains by inlining my CSS (although HTTP2 Push negates the benefits). This only makes sense for smaller stylesheets though. This seems to generally be the trend, but when I built my site I decided to go the opposite direction and extract all of my styles into a single external CSS file for caching benefits. This turned out to have a negative impact on perceived load time—particularly blocking fonts, but also just some TTFP generally—so I manually inlined what felt like the most critical styles, which helped a lot. First load feels pretty much the same as inline on my connection, which isn’t especially fast, and subsequent loads get it cached. I could probably improve it further with some page-specific splitting/inlining, but haven’t felt the need to prioritize that yet.
- 5y ago
- rasz 5y agostep one: make your User Agent modify CSP to disable them, or just --disable-remote-fonts there is no step two
- Seirdy 5y agoAgreed: disabling 3rd party fonts just makes pages look more native (by using fonts I've whitelisted) and load faster. The only regression is that some pages use icon fonts instead of SVGs. An often-cited justification is the small size of WOFF2 fonts, but the same can be achieved by using static Brotli compression on all assets.
- yoz-y 5y agoYeah, no. Until the standards give us more fonts with better metrics (like a guarantee that a default sans, serif and fixed-width fonts come from the same family), the default fonts will look quite crummy. I wish there was some font cache that could be shared between all sites, so once you downloaded a font it would be available for all. But I guess due to copyright it will never happen.
- manigandham 5y agoThat font cache is just using 3rd-party hosted fonts like Google Fonts.
- Zardoz84 5y agoif you read the article, you will know that it works anymore like a "font cache".
- Zardoz84 5y ago*don't work anymore
- leephillips 5y ago*doesn’t work anymore
- gvkhna 5y agoI typically embed the font into the CSS using base64 data URIs. Even typically large CSS files compress with gzip extremely well and if you have one style sheet to load your page will load the fonts and styles in one go very quickly. I don’t know why more websites don’t do this. Even having one large CSS file with everything compressed is much much faster then the waterfall of more files/connections. I recommend postcss-import that takes your file paths and embeds the files during build. Use responsibly.
- Dylan16807 5y ago> I don’t know why more websites don’t do this. Even having one large CSS file with everything compressed is much much faster then the waterfall of more files/connections. I could make a similar argument to say not to use CSS files, just embed everything into the page. Unless you have a ton of files, listing them all in the html will make them load just about as fast as a single file listed in the html.
- markdown 5y ago> I could make a similar argument to say not to use CSS files, just embed everything into the page. Then the poor user has to download heavier html on every page as the browse the site.
- michalc 5y agoI actually think there are cases for this. Say, you have a small amount of CSS and/or the user will in all probability just look at the one page on the site.
- markdown 5y agoThere absolutely are, and I've done it myself. But it's a rare site that would really benefit from the method.
- grenoire 5y agoWebdevs usually forget that neither practically unlimited bandwidth nor quotas should be take for granted. A lot of people have slow internet connections, don't make 'em suffer.
- eyelidlessness 5y agoOne thing I’d really like to build, if I ever have the time/energy, is a static analysis tool that automatically determines an optimal subset based on actual usage. Subsetting arbitrarily based on say charset definitely helps, but it can go even further if you only use even a subset of that charset.
- enw 5y agoOne step to fastest web fonts: use native fonts
- akie 5y agoI think that using a Google Font means that Google sets a third-party cookie for each visitor. If you need to conform to the GDPR, this probably means that you need to request visitor permission before you load the font.
- zerocrates 5y agoGoogle Fonts doesn't set cookies.
- akie 5y agoYou're right.
- Lio 5y agoGenuine question, is Google Fonts used for tracking in other ways or is it an “honest” free service?
- SquareWheel 5y agohttps://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users https://developers.google.com/fonts/faq#what_does_using_the_...
- deleted 5y ago[deleted]
- pg_bot 5y agoYou may also want to look into variable fonts if you are loading multiple variations of the same typeface. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/V...
- deleted 5y ago[deleted]
- john-doe 5y agoSubsetting fonts is a lot of trouble for ridiculous gains, maybe except if you're using something like Noto in all languages.
- endgame 5y agoStep zero: don't use them and trust the user's agent.
- maxwellwhite 5y agoThis is the way!
- egeozcan 5y agoI totally agree with you, but if you ever did freelancing as a web developer, you'll see many clients cling to their corporate identity principles (including font selection) way stronger than you may think.
- gherkinnn 5y agoIf you spent several hundred thousand on a rebranding that comes with a very expensive font license, of course you want it to be used. And frankly, it does make a difference. Too bad those very expensive fonts never come with a decent web license and you end up going for a half-arsed substitute. The problem aren’t necessarily fonts, but print-first design systems that don’t translate well to screens and interactivity.
- z3t4 5y agoThere is a dilemma when optimizing web sites and apps: Do you want stuff to show up on the screen before or after the font is loaded? So by not trying to optimize the font load, your site will render/load faster (because the browser starts rendering the site without the font, then replaces the "dummy" text with the actual font), and usually the web font has loaded just in time to show the correct font when the user starts reading.
- ChoGGi 5y ago> But a web without web fonts would be a far less interesting one The font of a website does not rate highly on my interest rating.
- jarolinvargas 5y agoPeople saying to use web safe fonts most likely have little design sensibility. Custom fonts define brands and identity and you should use them.