Optimize WebFont loading and rendering

UI Components for Vue
Post Reply
Posts: 1
Joined: 31 Dec 2020, 11:21

31 Dec 2020, 11:26

A "full" WebFont that includes all stylistic variants, which you may not need, plus all the glyphs, which may go unused, can easily result in a multi-megabyte download. In this post you will find out how to optimize loading of WebFonts so visitors only download what they will use.

To address the problem of large files containing all variants, the @font-face CSS rule is specifically designed to allow you to split the font family into a collection of resources. For example unicode subsets, and distinct style variants.

Given these declarations, the browser figures out the required subsets and variants and downloads the minimal set required to render the text, which is very convenient. However, if you're not careful, it can also create a performance bottleneck in the critical rendering path and delay text rendering.

The browser requests the HTML document.
The browser begins parsing the HTML response and constructing the DOM.
The browser discovers CSS, JS, and other resources and dispatches requests.
The browser constructs the CSSOM after all of the CSS content is received and combines it with the DOM tree to construct the render tree.
Font requests are dispatched after the render tree indicates which font variants are needed to render the specified text on the page.

The browser performs layout and paints content to the screen.
If the font is not yet available, the browser may not render any text pixels.
After the font is available, the browser paints the text pixels.


Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests