Give page specific advice on how to fix fonts (#1169)

ampproject · Mar 19, 2021 · 379d08a · 379d08a
1 parent e63ce2f
commit 379d08a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/packages/page-experience/lib/checks/fontDisplay.js b/packages/page-experience/lib/checks/fontDisplay.js
@@ -28,16 +28,22 @@ const checkDisplayOptional = (pageData, result) => {
     if (!fontface) {
       continue;
     }
+    const isGoogleFont =
+      fontface.mainSrc && fontface.mainSrc.startsWith('https://fonts.gstatic.com');
     if (!fontface.fontDisplay) {
       items.push({
         font,
-        fix: generateSuggestion(fontface),
+        fix: isGoogleFont
+          ? 'Add `&display=optional` to your Google Font import declaration. [Read more](https://web.dev/font-display/#google-fonts).'
+          : 'Add `font-display: optional`',
       });
     } else if (fontface.fontDisplay !== 'optional') {
       // TODO: only show this warning if CLS > 0
       items.push({
         font,
-        fix: generateSuggestion(fontface),
+        fix: isGoogleFont
+          ? `Replace \`$display=${fontface.fontDisplay}\` with \`&display: optional\` in your Google Font import declaration. [Read more](https://web.dev/font-display/#google-fonts).',`
+          : `Replace \`font-display: ${fontface.fontDisplay}\` with \`font-display: optional\``,
       });
     }
   }
@@ -58,12 +64,4 @@ const checkDisplayOptional = (pageData, result) => {
   });
 };
 
-function generateSuggestion(fontface) {
-  const isGoogleFont = fontface.mainSrc && fontface.mainSrc.startsWith('https://fonts.gstatic.com');
-  if (!isGoogleFont) {
-    return 'Add `font-display: optional` to your font-face declaration.';
-  }
-  return 'Add the `&display=optional` parameter to the end of your Google Font import declaration ([read more](https://web.dev/font-display/#google-fonts)).';
-}
-
 module.exports = checkDisplayOptional;
diff --git a/packages/page-experience/lib/checks/fontPreloading.js b/packages/page-experience/lib/checks/fontPreloading.js
@@ -30,7 +30,7 @@ const checkPreloads = (pageData, result) => {
       if (!fontface.mainSrc.startsWith('https://fonts.gstatic.com')) {
         items.push({
           font,
-          fix: `Add \`<link rel="preload" href="${fontface.mainSrc}" as="font" crossorigin>\` to your \`<head>\`.`,
+          fix: `Add \`<link rel="preload" href="${fontface.mainSrc}" as="font" crossorigin>\`.`,
         });
       }
     }