fix(font): fix missing fontaine fallback family

basics · Sep 13, 2023 · c793fd5 · c793fd5
1 parent e2b49ab
commit c793fd5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 14 deletions.
diff --git a/src/runtime/classes/Font.mjs b/src/runtime/classes/Font.mjs
@@ -48,9 +48,9 @@ export default class Font {
     return btoa(JSON.stringify(data));
   }
 
-  getCSSText() {
+  getCSSText({ usedFontaine = false } = {}) {
     const selector = createSelector(this.rootSelector, this.selector);
-    const family = `"${this.family}"`;
+    const family = prepareFamily(this.family, { usedFontaine });
     return wrapByMedia(
       `${selector} {
         font-family: ${this.fallbackFamily.join(', ')};
@@ -64,9 +64,9 @@ export default class Font {
     );
   }
 
-  getNoScriptCSSText() {
+  getNoScriptCSSText({ usedFontaine = false } = {}) {
     const selector = createSelector(this.rootSelector, this.selector);
-    const family = `"${this.family}"`;
+    const family = prepareFamily(this.family, { usedFontaine });
     return wrapByMedia(
       `${selector} {
         font-family: ${[family].concat(this.fallbackFamily).join(', ')};
@@ -122,3 +122,10 @@ function weightNormalize(weight) {
       return weight;
   }
 }
+
+function prepareFamily(family, { usedFontaine = false } = {}) {
+  if (!usedFontaine) {
+    return `"${family}"`;
+  }
+  return `"${family}", "${family} fallback"`;
+}
diff --git a/src/runtime/classes/FontCollection.mjs b/src/runtime/classes/FontCollection.mjs
@@ -42,16 +42,18 @@ export default class FontCollection {
     );
   }
 
-  getStyleDescriptions() {
+  getStyleDescriptions(options) {
     return getRelevantDescriptions([
-      getStyleDescription(this.list.map(font => font.getCSSText()).join(' '))
+      getStyleDescription(
+        this.list.map(font => font.getCSSText(options)).join(' ')
+      )
     ]);
   }
 
-  getNoScriptStyleDescriptions() {
+  getNoScriptStyleDescriptions(options) {
     return getRelevantDescriptions([
       getStyleDescription(
-        this.list.map(font => font.getNoScriptCSSText()).join(' '),
+        this.list.map(font => font.getNoScriptCSSText(options)).join(' '),
         true
       )
     ]);

diff --git a/src/runtime/composables/fonts.mjs b/src/runtime/composables/fonts.mjs
@@ -14,7 +14,7 @@ export default function useFonts(context) {
 
   const fontCollection = reactive(new FontCollection());
 
-  writeHead(isCritical, fontCollection);
+  writeHead(isCritical, fontCollection, runtimeConfig);
 
   return {
     isCritical,
@@ -30,16 +30,17 @@ export default function useFonts(context) {
   };
 }
 
-function writeHead(isCritical, fontCollection) {
+function writeHead(isCritical, fontCollection, runtimeConfig) {
+  const options = { usedFontaine: runtimeConfig.usedFontaine };
   useHead({
     link: computed(() => {
       return fontCollection.getPreloadDescriptions(isCritical.value);
     }),
     style: computed(() => {
-      return fontCollection.getStyleDescriptions();
+      return fontCollection.getStyleDescriptions(options);
     }),
     noscript: computed(() => {
-      return fontCollection.getNoScriptStyleDescriptions();
+      return fontCollection.getNoScriptStyleDescriptions(options);
     })
   });
 }
diff --git a/src/utils.mjs b/src/utils.mjs
@@ -24,7 +24,8 @@ export function isViteBuild(nuxt) {
 export const setPublicRuntimeConfig = (nuxt, options) => {
   nuxt.options.runtimeConfig.public.speedkit = {
     lazyOffsetComponent: options.lazyOffset.component,
-    lazyOffsetAsset: options.lazyOffset.asset
+    lazyOffsetAsset: options.lazyOffset.asset,
+    usedFontaine: !options.disableNuxtFontaine
   };
 };
 

diff --git a/src/utils/options.mjs b/src/utils/options.mjs
@@ -5,7 +5,7 @@ export function getDefaultOptions() {
     debug: false,
 
     disableNuxtCritters: true, // If set, `@nuxtjs/critters` will not be integrated.
-    disableNuxtFontaine: true, // If set, `@nuxtjs/fontaine` will not be integrated.
+    disableNuxtFontaine: false, // If set, `@nuxtjs/fontaine` will not be integrated.
     disableNuxtImage: false, // If set, `@nuxt/image` will not be integrated.
 
     optimizePreloads: true,