Every typeface the site uses is a file to download, and every variant (regular, bold, italic) is another. If the browser waits for them before showing the text, the page looks empty; if it shows the text in one font and swaps later, the page jumps. You have three levers: ask for less, tell the browser what to do while it waits (font-display) and serve the fonts from your own site.
1. Ask for less
| What to do |
Why |
| Use two or three variants, not eight |
Every weight and style is a file. A theme with six typefaces at five weights each is a problem on its own. |
| Prefer the woff2 format |
It is the compressed format current browsers accept. |
| Pick only the subset you need |
The “latin” subset includes the accents used in Portuguese. There is no need to download alphabets the site does not use. |
| Consider a variable font |
A single file can cover several weights. |
| Or use system fonts |
Zero cost: nothing to download. You give up the brand’s own letterforms. |
2. Tell the browser what to do while it waits
The CSS rule font-display sets the behaviour. The values most used:
| Value |
What it does |
Effect |
| swap |
Shows the text at once in a system font and swaps when the right one arrives. |
Text always readable; there may be a small jump. See how to fix CLS. |
| optional |
Gives the font a very short time; if it does not arrive, the system one stays for that visit. |
No jumps. On the first visit the brand’s typeface may not appear. |
| block |
Hides the text until the font arrives (for a limited time). |
Invisible text: avoid for body text. |
In your own files, the line goes inside the @font-face. When the fonts come from Google Fonts, the address carries the display=swap parameter. LiteSpeed Cache has options for this; the names change between versions.
3. Serve the fonts from your own site
| 1 |
Download the font files (in woff2) and upload them to the site, or use a plugin that downloads them and serves them from your own site.
|
|
| 2 |
Point the CSS at those files in the @font-face.
|
|
| 3 |
Preload the main font, only that one, with <link rel="preload" as="font" type="font/woff2" href="..." crossorigin>. The crossorigin attribute is required even for fonts from the same site.
|
|
| 4 |
Confirm: F12, Network tab, “Font” filter. The fonts should come from your own address and carry a long cache-control.
|
|
The advantages: one connection fewer to another address; the fonts share the same cache and compression as the rest; and the visitor’s IP address does not go to a third party just for loading a typeface, which matters to whoever looks after the site’s privacy. Current browsers separate the cache per site, so the old advantage of “the visitor already had that font from another site” no longer exists.
|
Beware of icon fonts. A full icon font can weigh more than all the site’s typefaces together. If you only use four icons, use SVG or a reduced set.
|
|
Measure before and after. If the Network tab shows fonts among the heaviest or latest files, it is worth it. If not, leave it and look elsewhere. See PageSpeed Insights warnings explained.
|
|
Does the text go invisible or jump when the page opens? Send us the address and the font name.
Open a support ticket
|
RECOMMENDED PRODUCT Web hosting with cPanel Domain and SSL included, daily backups and the panel you already know. from 321,75 MT/mo (3-year plan, with coupon) See plans |
Português
English
