September 15, 2016 at 09:27

Fonts on the web, review from 2016



Foreword


The article is not about everything possible related to typography and texts, such as letter-spacing and max-height. Rather, it is some list of entertaining opportunities that can be studied in depth with sufficient curiosity and time. I hope for the most part there is something that they did not know or heard from the edge of their ears.

Introduction


In 2016, you will not surprise anyone with non-standard fonts. 93% of browsers support them, and about 62% of sites use them. Someone simply writes @ font-face or embeds with Google Fonts, someone embeds a megabyte of fonts in base64 directly in css. There are many opportunities.

Loading


The article would be incomplete without a tablet showing the different behavior of browsers while downloading fonts, but I cannot afford to insert it - it is so common that it probably causes a nervous tick.

General concepts:

FOIT - flash of invisible text. First, a page without text is drawn, then immediately with the desired font.
FOUT - flash of unstyled text. First, one font is used, then the loaded one.
FOFT - some distinguish this subtype of problems, but is less common.

Various font loading strategies are described very well in a recent article by Zach Leatherman ( Russian version).), each with its own pros and cons. I’ll try to give a simplified overview of the various options: if you need to study, a set of links will be at hand.

@ font-face without additional tricks

It is common, you can leave everything as is at the mercy of the browser. Also a plus is that users are most likely already used to this behavior and do not notice problems. Cons: different behavior in different browsers, controversial behavior in some cases. In safari and some other browsers, in case of font loading problems, nothing may be displayed for a long time at all ..

Pros:

  • No extra effort
  • Most likely, users are accustomed to this behavior and rarely focus on it

Minuses:

  • Different behavior in different browsers
  • Controversial behavior in some cases

Font load detection library

General idea: we use the standard font before loading, after loading we switch the class to body and new fonts are included on the whole page. This is similar to the standard behavior of Internet Explorer and Edge.

Pros:

  • Font Control
  • Small library size
  • Just use

Minuses:

  • Font switching noticeable to user
  • May lead to the movement of elements on the page due to a change in text size
  • Additional tricks are required for the lack of redrawing the font upon restart: flags in cookies, sessionStorage

References:


Base64 font encoding

The most diverse way. You can inline the font directly into the main stylesheet, load them asynchronously, or add them to localStorage. It will be unexpected for someone that after gzip the size differs from the binary file quite a bit.

Pros:

  • In general, no additional libraries are needed to determine font loading
  • When used together with the main part, css makes situations with foit and fout much less common.
  • When saving to localStorage, all font caching is in our hands

Minuses:

  • Lost support for several types of fonts. Either you need to duplicate them (and thereby increase the overall size), or select the most common one (for example, woff and lose the savings from woff2)
  • The end of the css download is not a guarantee that the font can be immediately displayed! Like pasting this css directly into the page. Browsers need time to parse fonts before using them. All this results in three stages of rendering: default font, foit, the desired font
  • When pasted simply in css it will delay the first rendering of the entire page

References:


font-display

New css property that allows you to control the display of fonts at boot time. Pros and cons are obvious: ease of use and poor support (rather, none).


This is not exactly a download method, but some optimization. Using preload, you can reduce the time until the end of downloading web fonts, while reducing the likelihood of foit. Blink-based browsers start downloading fonts only after they find the text on the page with the corresponding font, and this greatly delays the final display of the page: you need to download css, parse it, apply it to the tree house and find the desired element. preload tells the browser that the specified resource should be loaded right now. The as, type, and crossorigin attributes are required.

References:


All the rest

There are several more variations of all of the above, as well as an option through JS (more on that below). For example, you can download only one font style, and use the rest for repeated visits. Or greatly reduce the set of font characters used (up to 5-10 kb) and put it all in base64. Or maybe, at the first call, do not use non-standard fonts at the first call, but only download them? You can also not use fonts if there is almost no text: SVG is quite suitable for logos. What to choose? Each one decides for himself, based on design, font (s) and audience.

Fontface


The new js-api allows you to download and use fonts without using the @ font-face declaration at all. A few examples to make it clear what it is about:

var f = new FontFace("newfont", "url(newfont.woff)", {});
f.load().then(function (loadedFace) {
  document.fonts.add(loadedFace);
  document.body.style.fontFamily = "newfont, serif";
});


fetch('newfont.woff2').then(
  res => res.arrayBuffer()
).then(
  buf => new FontFace("newfont", buf)
).then(ff => {
  document.fonts.add(ff)
});

Ellipsis is not part of the code.

  new FontFace('t', 'url( "data:application/font-woff2;base64, <...>")').load();

The problem is that you cannot directly understand which format is supported. Browser support is also not complete , but Safari 10 will be added to it. FontFace can be useful when rendering text via canvas, since you don’t have to create invisible elements with text.

References:


CSS properties


font-weight and font-style

font-weight is a fairly well-known property. Often you can see bold, less often - something with a value in numbers. It is worth noting that the web is increasingly selected from bold / italic / bold-italic, now you can see all kinds of thin, light, medium (there are no such keywords, but numerical values ​​are used for them). Another interesting question is what do browsers do if the desired style is not available? In the case of bold / italics, they try to generate glyphs based on the usual font variation.

References:


unicode-range

This property allows you to specify a list of characters that should be displayed in font. This can be useful as an optimization - if the page does not contain characters from this list, the font will not be loaded at all. You can also use unicode-range to style individual characters, such as quotation marks, or to display the ruble symbol. The problem may be in the support of this property by browsers, and although it is gradually disappearing, you still need to think: "what if there was no unicode-range."

References:


font-variant and font-feature-settings

font-variant - a slightly updated version of font-feature-settings. These properties allow you to use the additional features included in the font. For example, kerning, diagonal fractions, ligatures and various options for hieroglyphs.

References:


text-rendering

The property was conceived as a generalized regulator of font rendering speed, affecting simultaneously kerning and ligatures. Despite its power, the property did not receive significant distribution and earned the fame of bazhny and brake. Currently, it makes sense to use font-variant and font-kerning, they give more control (if browser support is not so important, and font-feature-settings otherwise). Actually, text-rendering is a property of SVG and is not described in any CSS specification.

References:


font-kerning

font-kerning controls the operation of kerning (indentation between individual letter combinations). For inclusion, kerning information is required inside the font itself. It is a more modern replacement for part of the font-feature-settings functionality.

References:


font-stretch

A rarely used property with a difficult fate. Introduced in CSS 2 and supported in Firefox 9 with Internet Explorer 9, it was removed from CSS 2.1 and forgotten before CSS 3, and was recently added to Chrome 48. It allows you to use alternative font styles, narrower or wider.

Using Inline Fonts


OS X and iOS have a very interesting situation with system fonts. Recently, San Francisco was introduced there as the main system interface font. And if Helvitica Neue could be specified directly in the font-family (at least sometimes in a difficult version), then with San Francisco this method was intentionally difficult. According to the new logic, so that developers do not sharpen on a particular font, in such cases you need to use the keywords "-apple-system- *", which are supported with iOS 7. As an analogue, recently added the value BlinkMacSystemFont in desktop chrome.

Android has the Roboto font, which is not available by name. However, you can use simple sans-serif, sans-serif-light, sans-serif-medium and others.

Because of the license, in the general case, you cannot just take and put someone’s system fonts on your server. It is allowed only to indicate them in css, since then the worries about the license of the fonts installed in the system fall on the shoulders of the user.

References:


Optimization


The easiest way is to use the optimal format. Woff2, which appeared not so long ago, is estimated by some as the best option for fonts, due to about 30% reduction in file size compared to woff. Judging by caniuse - woff2 will soon be supported in Edge and should be in the new Safari 10.

Another way is to remove unused information from the font itself, for example, ligatures or character sets from unused languages. It is also possible to simplify the vector character curves themselves - sometimes there are too many points in them and they can be set easier.

References:


Определение текущего шрифта элемента


Sometimes the task is to determine the current font of the element. In the case of development, Chromium Developer Tools and the recently returned Fonts from Firefox can help. Otherwise, it remains only to consider the size of the element and compare it after changing the font-family value. FontFaceOnload and FontFaceObserver do something like this if the FontFace js interface is not available in the browser. Why don't browsers provide a clear api for this? The fact is that individual characters within one element can be drawn in different fonts, which are listed in font-family. This may be affected by the unicode-range mentioned above and the font glyph set itself.

Where to get custom fonts?



Other


Tags:

Also popular now: