Tyler Sticka
Seriously, Don’t Use Icon Fonts
I share it now, but Tyler wrote it 7 years ago, and many other said the same, so I really wonder why people keep using icon fonts… 🤦♂️
Contents tagged “font”
There are 18 contents with this tag:
-
-
How many times do we have to say it?
Stop.
Using.
Icon fonts.Seriously, Don’t Use Icon Fonts.
Here the font request responds with a 503 error (via the Service Worker)…
-
My photography site is hosted on #Cloudflare, and they transform
preloadinto HTTP/2 push. Great!But why is my preloaded/pushed font downloaded twice then? 😅
-
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
I already had Glyphhanger installed on my computer, but I remember having similar issues, so Sara's article is welcome for anyone who wants to use it to optimize fonts weight, including future me.
-
Building a new site with the beautiful Coniferous web font from @OHnoTypeCo and I can't find the right "web safe" fallback font to be able to optimize Cumulative Layout Shifts. 😭
Any suggestion?
-
How to avoid layout shifts caused by web fonts
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT).
-
Adjust font size with CSS custom properties
I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.
-
How To Convert Variable TTF Font Files to WOFF2
In previous experience, converting variable TTF to WOFF via online tools like convert.io or FontSquirrel would often break the axes needed to interpolate between font variation settings.
-
If you're using Google Fonts service instead of self-hosting the fonts (even if they come from Google Fonts), Harry shows here the optimal performance and UX you can get with it, with lot of details, but a really simple solution.
-
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
-
A short history of body copy sizes on the Web
A nice overview of the many variations body copy has seen since the Web exists.
-
Progressive Font Enrichment: reinventing web font performance
In issue #11 of his great Web Fonts & Typography News newsletter, Jason Pamental shares the progress made by the W3C Web Fonts Working Group towards a new way to progressively serve fonts so that only the required new glyphs are downloaded every time new characters have to be rendered.
-
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
-
Should I Use JavaScript to Load My Web Fonts?
the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s performance profile to suit a user’s network conditions, user preferences, improving the general loading behavior of self hosted fonts and third party hosting providers.
-
Evan Minto wrote a great article showing the Internet Archive has tested the actual root font-size set by their visitors, and the result shows a lot of people still change the default one: Pixels vs. Ems: Users DO Change Font Size.
-
People don't change the default 16px font size in their browser (You wish!)
I am really happy to still read articles that advocate for the use of proportional CSS units as em and rem in 2016. But there are often trolls[1] that come comment these articles to say that we, who are using proportional units, are dumb, because there is no need for this. Here is an example.
-
De nouvelles fontes sur Gastero Prod
Navigant régulièrement avec une connexion de piètre qualité, j'en ai un peu marre de voir de nombreux sites me présenter juste des éléments d'interface en attendant le chargement des fichiers de fontes utilisées par @font-face. Du coup, vu que ce site n'a pas spécialement d'enjeu graphique particulier, j'ai décidé de me passer des deux fontes que j'imposais depuis la refonte récente. L'occasion de me replonger dans l'enfer des font stacks web safe…
-
Vous l'avez peut-être remarqué vous même si vous faites partie des rares à venir de temps en temps sur le site, mais certainement pas si vous me lisez via le flux RSS, j'ai fait quelques ajustements, notamment sur la page d'accueil.
Sara Soueidan
Simon Hearne
Romaric Pascal
Henry Desroches
Harry Roberts
Vincent De Oliveira
Florens Verschelde
Jason Pamental
Monica Dinculescu
Zach Leatherman
See all tags.