Articles Tagged webfont

Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:

…instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.

Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will … Read article “Critical Web Fonts”

Typekit has updated the WebFont Loader project with support for the new CSS font loading API:

Before the introduction of the native API, we detected font loading by inserting test elements in the page. These elements were regularly polled for width to see if the font had loaded. This process is very expensive because it triggers a page wide style reflow each time the elements are checked. Using the native API, we can bypass this process completely, which results

Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on the overall reading experience:

More than fancy swashes and superfluous ligatures, OpenType features are font superpowers. The best, most capable typefaces are full of sophisticated reasoning and delightful surprises

Joe Richardson shared this little trick over on CodePen:

body {
   /* operating system font  */  
   font: caption;
}

• If you’re on Ubuntu this will be the Ubuntu Font.
• If you’re on Yosemite this will be Helvetica.
• If you’re on El Capitan this will be San Francisco.
• If you’re on Microsoft this will be Segoe UI.

Not entirely sure the support of this, but if it works for your needs it’s a lot easier than declaring them directly or … Read article “font: caption;”

Chris Manning takes us through the weird journey that is custom fonts on the web. We started with the “Flash of Unstyled Text”, which at first we didn’t like because it was abrupt and felt janky and could even cause reflow, which didn’t help readers focus. Browsers reacted, and started hiding text until the custom font was ready (various implementations did it differently). “Flash of Invisible Text” as it were. Times have changed such that FOUT is now preferable again, … Read article “The @font-face dilemma”

A post by Craig Hockenberry that details how to use the San Francisco system font for your website if you’re running El Capitan.

I especially like Craig’s suggestion for a new syntax when using any operating system’s font, so for example in iOS that would probably be San Francisco or Helvetica Neue whilst in Android it would be Roboto. He suggests that we declare a system keyword in the font-family rule (although this won’t work in any browsers today):

body