diff --git a/sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte index 473d6ce5e2..57778e2759 100644 --- a/sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte @@ -172,8 +172,8 @@ plugins: [

`} />

- Note that Skeleton also provides a Lightswitch utility if you wish - toggle between light and dark modes. + Note that Skeleton also provides a Lightswitch utility if you + wish to toggle between light and dark modes.

@@ -308,23 +308,27 @@ body { /> {/each} -

5. Preloading Fonts.

+

5. Handle Font Flickering.

- To avoid your page flickering during hydration, consider preloading fonts within the head - tag in app.html + To avoid your page flickering during hydration, consider using the font-display descriptor for the + @font-face + at-rule that determines how a font face is displayed based on whether and when it is downloaded and ready to use. +
+
Replace your @font-face at-rule with the following:

{#each activeFonts as f} - `} +@font-face { + /* Reference name */ + font-family: '${f.name}'; + /* For multiple files use commas, ex: url(), url(), ... */ + src: url('/fonts/${f.file}'); + /* Gives the font face an extremely small block period and an infinite swap period. */ + font-display: swap; +} + `} /> {/each} {:else if tabsFontImport === 1}