CC Symbols – A webfont with Unicode-compatible Creative Commons license symbols

New in Unicode 13 is the addition of the Creative Commons License symbols (along with 5382 other characters): U+0229C No derivatives U+1F16D Creative Commons U+1F16E Public Domain U+1F16F Attribution U+1F10D No rights reserved U+1F10E Share-alike U+1F10F Non-commercial Daniel Aleksandersen was quite excited to use these on his site, but then noticed: No system fonts — font files […]

Should you self-host Google Fonts?

Google Fonts is great, but it also has a downside: it affects your page’s waterfall (during which some render-blocking may occur, as it involves CSS) as explained by Barry Pollard: The problem is that your website (say www.example.com) loads the stylesheet from fonts.googleapis.com, which returns some CSS made up of font-face declarations. This means you […]

Control Google Fonts font loading with font-display

As of late May Google Fonts has added support for a display querystring parameter. Using it you can control the CSS font-display Property which allows you to control what happens while the font is unavailable. Specifying https://fonts.googleapis.com/css?family=Roboto&display=swap as the font to load, will yield the following: @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: […]

How to use variable fonts in the real world

Richard Rutter (@clagnut): Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way. Always great to see how others went head first into a problem. Be sure to checkout the Ampersand website itself too, […]

Fontastic Web Performance

Emojineer Monica Dinculescu: Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk […]

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time. Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see […]

Minimize FOUT with Font Style Matcher

Great tool by Monica Dinculescu (@notwaldorf): 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 […]