From 379d08afbd20d675b4f359940c1dc40e1299d66f Mon Sep 17 00:00:00 2001 From: Sebastian Benz Date: Fri, 19 Mar 2021 19:27:12 +0100 Subject: [PATCH] Give page specific advice on how to fix fonts (#1169) --- .../page-experience/lib/checks/fontDisplay.js | 18 ++++++++---------- .../lib/checks/fontPreloading.js | 2 +- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/page-experience/lib/checks/fontDisplay.js b/packages/page-experience/lib/checks/fontDisplay.js index 67e34b1f8..ab66dcdfe 100644 --- 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 index ff00136a0..ea479572f 100644 --- 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 \`\` to your \`\`.`, + fix: `Add \`\`.`, }); } }