Progressive Web Apps with Angular by Majid Hajian

Author:Majid Hajian
Language: eng
Format: epub
ISBN: 9781484244487
Publisher: Apress

Optimize Fonts

It’s very likely that you are using fonts in web applications these days, especially external fonts such as Google fonts. While we add the style link to the head of the page, it should be taken into consideration that these fonts will block rendering. That means rendering will hold off until these styles are downloaded and rendered. It is important to slim down the initial need for fonts and load the reset of them on demand.

Self-Hosting Fonts

Using a web font face block means that the browser decides what to do if it takes a long time for that web font to fetch. Some browsers will wait anywhere up to three seconds for this before falling back to a system font, and they'll eventually swap it out to the font once it's downloaded.

We are trying to avoid invisible text, so thanks to new feature called font-display, this helps to decide how web fonts will render or fall back based on how long it takes for them to swap.

Swap gives the font face a zero-second block period and an infinite swap period. In other words, the browser will render text pretty quickly with a fallback font if downloading takes time. Once the web font is ready, it is going to swap. This feature has a good browser support.1@font-face {

font-family: YouFont;

font-style: normal;

font-display: swap;

font-weight: 400;

src: local(yo-font Regular'), local(YouFont -Regular'),

/* Chrome 26+, Opera 23+, Firefox 39+ */

url(you-font -v12-latin-regular.woff2') format('woff2'),

/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

url(you-font -v12-latin-regular.woff') format('woff');

}

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.