Geekly Articles each Day
📜 ⬆️ ⬇️

Fonts on the web, a review from 2016



Foreword


The article is not about everything possible related to typography and texts, like letter-spacing and max-height. It is rather a list of interesting opportunities that can be studied in depth if there is enough curiosity and time. I hope for the most part there is something that they did not know or heard by the edge of the ear.

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 inserts <link> with Google Fonts, someone inserts a megabyte of fonts into base64 directly into css. There are many possibilities.

Loading


An article would be incomplete without a tablet of different browser behavior while loading fonts, but I cannot afford to insert it - it is so common that it probably already causes a nervous tic.
')
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. At first one font is used, then - loaded.
FOFT - some have such a subtype of problems, but it is less common.

The various strategies for downloading fonts are very well described in a recent article from Zach Leatherman ( Russian version ), each with its own pros and cons. I will try to give a simplified overview of various options: if you need to explore, a set of links will be at hand.

@ font-face without additional tricks

It occurs often, you can leave everything as it is at the mercy of the browser. Also a plus is that users, most likely, have become accustomed to such behavior and do not notice any problems. Cons: different behavior in different browsers, controversial behavior in some cases. In safari and some other browsers, in case of problems with font loading, nothing can be displayed at all for a long time.

Pros:


Minuses:


Library for defining font download

The general idea: we use a 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:


Minuses:


References:


Base64 font encoding

The most diverse way. You can inline the font directly into the main style file, load them asynchronously or even add them to localStorage. For some, it will be unexpected that after gzip the size differs very little from a binary file.

Pros:


Minuses:


References:


font-display

New css-property that allows you to control the display of fonts during download. The pros and cons are obvious: ease of use and poor support (rather, no).

<link rel = preload>

This is not really a download method, but some optimization. With the help of preload, you can reduce the time until the end of the download of web fonts, simultaneously 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 strongly postpones the final page display: you need to load css, parse it, apply it to the house tree and find the necessary element. preload indicates to the browser that the specified resource should be loaded right now. Required attributes as, type and crossorigin.

References:


All the rest

There are several more variations of all of the above, as well as a variant via JS (more on that below). For example, you can load only one font style, and all the rest to use when re-entering. Or cut back the set of used characters of the font (up to 5-10 kb) and put all this in base64. Or maybe, on the first entry, not to use non-standard fonts on the first entry, but only to load them? You can also not use fonts if there is almost no text: SVG is quite suitable for logos. What to choose? Everyone 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 this 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) });

A triple point is not part of the code.

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

The problem is that it is impossible to understand which format is supported directly. Browser support is also not complete , but Safari 10 will be added to it. FontFace can be useful when drawing text through canvas, since you do not have to create invisible elements with text.

References:


CSS properties


font-weight and font-style

font-weight is a fairly well-known property. You can often 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 sorts of thin, light, medium (there are no such keywords, but for them numeric values ​​are used). Another interesting question is what do the browsers do if the desired outline is not available? In the case of bold / italic, they attempt 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 a font. This can be useful as an optimization - if the page does not have characters from this list, the font will not be loaded at all. You can also use unicode-range to style individual characters, for example, quotes, or to display a ruble symbol. The problem may be in the support of this property by browsers, and although it gradually goes away, you still need to think: “what if there was no unicode-range”.

References:


font-variant and font-feature-settings

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

References:


text-rendering

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

References:


font kerning

font-kerning controls the operation of kerning (indents between individual letter combinations). Inclusion requires kerning within the font itself. It is a more modern replacement of the function font-feature-settings.

References:


font-stretch

Rarely used property with a hard 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 not so long ago added to Chrome 48. It allows for the use of alternate font styles that are narrower or wider.

Using embedded fonts


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

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

Because of the license, it’s generally impossible to simply pick up someone’s system fonts on your server. It is only allowed to specify them in css, since then the concerns about the license of the fonts installed in the system fall on the user's shoulders.

References:


Optimization


The simplest is to use the optimal format. Woff2, which appeared not so long ago, is considered by some to be the best option for fonts, due to a roughly 30% decrease in file size compared to woff. Judging by the caniuse - woff2 will soon be supported in the 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 curves themselves symbols - sometimes there are too many points in them and they can be set easier.

References:


Determining the current font element


Sometimes there is the task of determining the current font element. In the case of development, Chromium Developer Tools and the recently returned Fonts panel from Firefox can help. Otherwise, it remains only to read the size of the element and compare it after changing the font-family value. Approximately, FontFaceOnload and FontFaceObserver are doing this if the FontFace js interface is not available in the browser. Why browsers do not provide for this distinct api? The fact is that individual characters inside one element can be drawn with different fonts, which are listed in the font-family. This can be affected by the above-mentioned unicode-range and the font glyph set itself.

Where can I get non-standard fonts?



Other


Source: https://habr.com/ru/post/310044/

More articles:


All Articles