The fonts live in Webal Blocks, Options, Fonts tab. This page explains the four yes/no boxes at the bottom of that tab. The font pickers, the weights and Apply fonts to are explained on the tab itself, and fonts are added in Webal Blocks, Fonts.
Where the fonts come from
Every font file is served from your own site. A font you add from Google Fonts is downloaded once, by your server, into your site's images/wbl-fonts folder, and from then on it is served from there. Your visitors' browsers never contact Google, so no IP address is sent to Google and no cookie or consent question comes from the fonts.
That is why there is no preconnect box. A preconnect tells the browser to open a connection early to another server it will need soon. Our font files are on the same server as the page, a connection to which is already open, so a preconnect would do nothing. Webal Blocks adds nothing for it to the page.
The four boxes
| Box | Default | What it does |
|---|---|---|
| Preload the heading font file | On | Sends a Link: <...>; rel=preload; as=font; crossorigin header for the heading font's main file, so the browser starts fetching it before it has read the page's CSS. Off sends no header for the heading font; the font still loads, just a little later. |
| Preload the body font file | On | The same for the body font. If the heading and the body use the same file it is preloaded once, and turning off only one of the two boxes keeps that one preload. |
| Show text in a fallback font while the font loads | On | Writes font-display: swap in each font rule, so text shows at once in a similar-looking fallback font and changes to your font when it arrives. The fallback is metric-matched (same size and line spacing as your font), so little moves when the swap happens. Off writes no font-display at all. The browser then decides, and most browsers hide the text for up to three seconds while the font loads. Leave this on unless you have a reason. The metric-matched fallback is kept either way. |
| Smooth the edges of text | Off | Adds one rule, -webkit-font-smoothing: antialiased with -moz-osx-font-smoothing: grayscale, on the whole page. It only changes how text is drawn in browsers on macOS and iOS: edges are drawn in grey instead of colour and text looks a little thinner. Windows and Android ignore it. The rule sits in the wbl cascade layer, so your own CSS wins if it sets the same property. |
The preload and swap boxes only matter when a font from your site is chosen for the heading or the body (the template's own font and the system fonts are not downloaded, so there is nothing to preload). The smoothing box works with any font.
Nothing changes until you tick a box
With the boxes at their defaults the page gets exactly what it got before these boxes existed: the same preload headers, the same stylesheet text and the same file name. Tests compare the real page, byte for byte, with the output captured before the boxes were added.
When you change a box the stylesheet is written once to a new file (its name carries a short code of the settings), so a page that is cached somewhere never meets a half-changed file.
Notes
- The boxes change only the font stylesheet and the preload headers. The text of your modules is not touched, so Joomla's module cache stays valid and Scripts Off is unaffected: this is CSS and headers only.
- The smoothing rule is part of the font stylesheet, so it is on every page that shows a Webal Blocks module (the stylesheet is added with the first module), not on pages that show none.
- A Content Security Policy needs nothing special for these boxes: the fonts and the stylesheet come from your own site (
font-src 'self',style-src 'self'). - If you later want fonts served from another host, that would need its own preconnect. Webal Blocks does not do that.