7 ms·
It always annoys me when a site hangs when it tries to load something from fonts.googleapis.com. Developers need to use a system font stack which loads fonts fr
by night-rider 4y ago
It always annoys me when a site hangs when it tries to load something from fonts.googleapis.com. Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts. On a fast connection you don’t notice it, but you will notice it on a slow connection, and the majority are on slow connections. Developers need to deliberately use slow connections and see just how responsive their site is. Don’t develop on a hyper fast connection because you assume the site loads super quick and overlook latency issues. I think you can emulate slow connections in browser devtools so there is that.
- littlecranky67 4y ago[deleted]
- eatonphil 4y agoWhat are the issues? I freaked out for a second because I'm pretty sure I host materialicons font files and css files. I checked the docs though and it seems like self-hosting is within the license. Maybe material icons are different or maybe I'm misreading this page. https://developers.google.com/fonts/docs/material_icons https://developers.google.com/fonts/docs/material_icons
- zinekeller 4y agoThat's plain wrong. Sure, if you used Monotype's there will be issues (because they're so litigious), but Google Fonts only hosts open-source fonts so there's no reason to just search the correct font and host that instead (unless you somehow manually tweaked the URL to get Product Sans: that's illegal even if you loaded it from Google's CDNs).
- usrn 4y agoIt's custom fonts that don't share metrics with built in fonts. If they don't do that the page content jumps around when the fonts load. Custom fonts were a terrible idea, I wish browsers would just drop support for them. EDIT: Unless there's a way to include metrics outside the font there really isn't a way to prevent reflows when it loads other than blanking the entire page until then.
- aqfamnzc 4y agoIs there a setting or extension that just uses the closest available system font and blocks the remote API?
- HelloNurse 4y agoThe "closest available system font" is determined by the font names in a site's stylesheets, not by magic.
- jaywalk 4y agoThere is no way that a browser could figure out what the "closest available" system font is, or that one even exists. It's up to the designer to specify the font(s) to be used.
- shakna 4y agoYou can disable 3rd party fonts. On Firefox, this is as simple as going to about:config and setting gfx.downloadable_fonts.enabled to false. On Chrome, it requires adding the flag --disable-remote-fonts to however you're opening it.
- lelandfe 4y agoIf sites don’t specify image dimensions, the page content jumps around when the images load. Images were a terrible idea, I wish browsers would just drop support for them. (There are many ways to avoid reflows with font loading, eg font-display: optional)
- giancarlostoro 4y agoThis reminds me of a plugin I've been using for a little while, it's not perfect but it caches these requests ahead of time for you: https://addons.mozilla.org/en-US/firefox/addon/decentraleyes/ https://addons.mozilla.org/en-US/firefox/addon/decentraleyes...
- Georgelemental 4y agohttps://www.localcdn.org/ https://www.localcdn.org/ is a fork that gets more frequent updates
- giancarlostoro 4y agoOh thats beat how does this one compare?
- lelandfe 4y agoUse font-display, people. Required reading, “More than you ever wanted to know about font loading on the web”: https://www.industrialempathy.com/posts/high-performance-web-font-loading/ https://www.industrialempathy.com/posts/high-performance-web... Edit: > Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts IMO the takeaway is "self-host fonts, make sure they're small files, load early, and don't block render," not "only use native fonts"
- abirch 4y agoThank you goodperson!! You made my week!
- TecoAndJix 4y agoI love the progress bar at the top of that page. It is a better gauge of the required time commitment than the "7 minute read" or by glancing at the scrollbar block size, IMO.
- Angostura 4y agoIsn't it a shame that OS people have started making scroll bars so hard to see that someone is having to implement a less functional equivalent on-page.
- wwweston 4y agoWhich browsing contexts still feature the affordance of scrollbar blocksize? I thought UX as a profession had chosen to totally commit to the sin of removing it.
- Zardoz84 4y agoYou can serve the font from your own web server, and avoid any problem with fonts.googleapis.com
- WhyNotHugo 4y ago+1 It's not even clear if using Google Fonts is GDPR compliant (since you're leaking the fact that your visitor has visited your website): https://github.com/google/fonts/issues/1495 https://github.com/google/fonts/issues/1495 Even if you do want to use your own hand-picked font on your site, just self host it, or bundle it with something like https://fontsource.org/ https://fontsource.org/ They provide the tools to bundle the fonts and serve them yourself: https://fontsource.org/fonts/merriweather-sans https://fontsource.org/fonts/merriweather-sans EDIT: The original comment mentioned "fortawesome" instead of "fontsource". I mixed up the names, my bad!
- bigfudge 4y agoSurely you are not processing data in this case though? The client (software) determines whether to make a connection to fonts.google.com. Your website never passed the information to google.
- q-big 4y ago> Your website never passed the information to google. Your website is malware that contains code which makes the visitor's browser connect to Google's server.
- c0balt 4y agoNo, that's not how it works. If the website (via js or tags) requests that something is called, than your software calls it and you're responsible. The client only runs your software, in this case, HTML & co. Though it arguably doesn't get enforced anyways, except for some big corps.
- Grollicus 4y agoThat may be technically correct, but doesn't count in front of a judge. They generally don't care for implementation details but they care for the results. And the result is that you made your visitor talk to google.
- sdoering 4y ago
- xwdv 4y agoIt’s not the developers fault it’s the god damned designers who insist we need custom fonts for everything. These people have no technical sense.
- caymanjim 4y agoIf developers can't efficiently deliver what designers want, within reason, that's most definitely the the fault of developers collectively, even if it might be a big ask of a single developer without sufficient experience or resources.
- nonrandomstring 4y ago> If developers can't efficiently deliver what designers want, within reason, that's most definitely the the fault of developers collectively, even if it might be a big ask of a single developer without sufficient experience or resources. An interesting take on which part of the dog wags. In your model, developers seem positioned to serve designers. Having written a book on design, and practised it, I have to say that web is very unusual in allowing designers such rein. In other disciplines, like sound design or product design, the constraints and requirements of the project come first, and designers need to fit their work to that. A very great many web projects I have seen fail went south the moment "designers" got involved. Designers seems to wield an inappropriate level of power and influence, and operate without proper technical supervision, often breaking things or creating unreasonable demands. I think this misalignment comes from the early days of the web, when anyone who could write HTML called themself a web designer and took on an entire site development. Even though post-CGI/database the server-side roles were better differentiated, the legacy of "aesthetic driven design" lingers. I do not want to denigrate web designers, but times have changed and in my opinion, having a website that "looks great" just isn't that important these days. I'd much rather use simpler, accessible, secure, private, content-centred sites.
- robin_reala 4y agoSorry, who do you think designs the simpler, accessible, secure, private, content-centred sites?
- AtNightWeCode 4y agoWhat is even more annoying with fonts.googleapis.com is that Android has such a poor set of default fonts.
- dredmorbius 4y agoI wonder what the incentive for that might possibly be....
- eloisius 4y agoI disabled web fonts by default in uBlock Origin. The internet is so much better without them. I selectively enable them for sites I use frequently that have special icon fonts that mess up the interface if they can't load.
- bee_rider 4y agoIs there a need to use uBlock for this sort of thing? In Firefox, there's a button to allow sites to use their own fonts, in the 'advanced' fonts menu. I don't see any reason why a website should pick it's own fonts. I go back and forth on allowing it to set background and text colors. Forcing black text on a white background does make some pages pretty ugly, but it does force everything to be readable.
- eloisius 4y agoThere isn't, except that it makes it possible to selectively enable them on certain sites. They don't bother me for things that I use regularly and already have them cached, like my bank. In fact, without them a lot of UI elements like carets and button icons become junk.
- bee_rider 4y agoYeah, the caret issue was a little weird to get used to, but I find it kind of funny now.
- antihero 4y agoAh yes, we should entirely limit typographic creativity due to creating slight irritation for the lowest common denominator. Guess we should stick to web safe colours and 90% JPEGs too. Self-hosted web fonts are fine.
- unmole 4y ago> typographic creativity More like self-indulgent wankery.
- 4y ago
- onion2k 4y agoDevelopers need to use a system font stack which loads fonts from the system itself instead of remote web fonts. The default font display setting for Google fonts is 'swap'. Using font-display means the browser will block rendering for a short time, and then use the fallback font if the font hasn't loaded, and then swap in font when it does eventually load. But, and here's the important bit, the block period for 'font-display: swap' is 0ms. In other words, Google Fonts works how you think it should already so long as the developer has included a fallback system font in the font-family. I suspect you're attributing a blocking problem to Google Fonts when really it's caused by something else.
- lelandfe 4y agoThat swap value lives inside a CSS file that, by default, is blocking. Opening a new connection takes quite a lot of time.
- nix23 4y agoLocal CDN is a pretty good extension: https://addons.mozilla.org/de/firefox/addon/localcdn-fork-of-decentraleyes/ https://addons.mozilla.org/de/firefox/addon/localcdn-fork-of... But sometimes if the webpage looks funny, you have to deactivate it.
- WorldMaker 4y ago> Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts. Browsers have always loaded a font from the system over a web font if it has a font of that name. We could just normalize having a lot more free as in beer fonts installed on the average user's machine. The unfortunate emphasis there is "average user's machine" as font loading times are already a a deanonymization vector/fingerprinting. Way back in the day IE made a big deal about bundling a group of fonts and calling them "Web Safe" and we need an initiative like that again. Take the Top X fonts from Google Fonts and just bundle them with browsers or operating systems and spread those as widely as possible so that it isn't a useful deanonymization vector.
- jfk13 4y ago> Browsers have always loaded a font from the system over a web font if it has a font of that name. This isn't actually accurate. It's possible for a CSS author to write @font-face rules that behave in this way (by including local(...) sources ahead of remote-font URLs), but that's by no means universal practice.
- WorldMaker 4y ago> Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule. https://developer.mozilla.org/en-US/docs/Web/CSS/font-family https://developer.mozilla.org/en-US/docs/Web/CSS/font-family `font-family` rules apply ahead of `@font-face` rules. `@font-face` rules are used to source fonts not already installed on the system. (ETA: local() is to provide alternate family names when a font may be installed under different family names.)
- jfk13 4y agoI think you may be misunderstanding how @font-face rules and font-family names work. (Or else I'm not understanding how you're stating it.) See https://www.w3.org/TR/css-fonts-3/#font-family-desc https://www.w3.org/TR/css-fonts-3/#font-family-desc: > If the font family name is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet. Given CSS such as body { font-family: Palatino, serif; } @font-face { font-family: Palatino; src: url(palatino.ttf); } this will block the browser from using an installed Palatino font and tell it to load the remote resource instead. So it's possible to use @font-face { font-family: Palatino; src: local("Palatino"), url(palatino.ttf); } to ask for the locally-installed font if present, falling back to the remote resource otherwise.
- oliwarner 4y agoI've made a few websites. This idea might work for your blog but it doesn't swing with designers. Brand control is everything, and that extends well into typography. Given the web is about 65% browsed by a Google client, I'm surprised Google Font aren't directly installed into each system fonts on first load.