Tag Archives: Fonts

The New System Font Stack?

As system fonts get nicer you might consider treating them like first-class citizens on your web site


Ire Aderinokun writes:

A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser).

Relatively recently, some websites and web applications have been adopting a new method for using system fonts in the browser. With this method, the fonts used by different systems are explicitly called themselves in the font-family property.

Read more from the source: bitsofcode

Faster Font Loading with Font Events

The font event API is out in Chrome and coming in Firefox 36 but you can use it now with this polyfill


Jonathan Suh writes:

Web fonts are great and make the web a more beautiful space; however, loading them can be slow, which results in an unwanted side effect: FOIT (Flash of Invisible Text). I’ve experienced FOIT on my website, particular on mobile connections, but with the help of some homework and fantastic resources, plus some JavaScript and CSS, I managed to fix it.

Also see http://caniuse.com/#feat=font-loading

Read the full article Jonathan Suh

Use localStorage to save font files as data URIs to load fonts faster without any flicker

A clever way to avoid the flicker that a custom font introduces

The idea is to only load a font from the server once. Then we store the data into the localStorage. On subsequent requests we load the font directly from localStorage. This eliminates the flashing on subsequent page loads. Only the first load is affected by the flashing.

Overview of the script

1. We let the old browsers stop early. Testing for window.addEventListener or some knows user agents (older Android stock browser, Opera Mini, etc.) is good enough.

2. In some cases localStorage can be unreachable, although the browser supports WOFF fonts. For theses cases I provide some fallback.

3. Then we check whether the font is already stored in localStorage. If it is, we load it immediately.

4. If it hasn’t been loaded before, we load it with an AJAX call. But first we check for WOFF2 support.

5. Then we store the data into localStorage and load the css text into a style element.

Read full article at bdadam.com

Speeding up CSS with data URIs… for fonts?

Worried about site speed and font-blocking? 79% of visitors use browsers that support the .woff format. So why not embed fonts as a data URI into your css?

IcoMoon and FontSquirrel already provide an option to Base64 encode the font into CSS.

The author of an article at SoSweet! Creative, Stephen Scaff, writes:

Now this does add considerable weight to your css, and its shear length is a bit unruly. So, I opt to create a separate fonts.css file, including base64 @font-face for all my fonts and custom icon font set. Obviously, I load this file after all other css assets. Of course, you can further minimize size by gzipping, but I’ve yet to experience any performance or Flash of Unstyled Content (FOUC) issues.

See Can I Use for the latest support matrix for the .woff format.

With Can I Use, you may even consider server-side user agent sniffing to ensure speedy downloads for older Android and IE8.

Read more from SoSweet! Creative