diff --git a/README.md b/README.md index aaa9548..6fdf64f 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ colors and fonts. The following keys are supported: "fonts": { "body": "'lato', sans-serif", "header": "'PT Sans', sans-serif", - "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400" + "googleFontsUrl": "https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400&display=swap" } } } @@ -46,8 +46,11 @@ defaults to the value in `DEFAULT_GOOGLE_FONTS_URL` inside `pages/index.js`. 1. Browse or search fonts at [fonts.google.com](https://fonts.google.com). 2. Add each font to your selection then open the **Get embed code** panel. -3. Copy the `href` attribute from the `` tag and place it in - `style.fonts.googleFontsUrl`. +3. Copy the `href` attribute from the `` tag and append `&display=swap` to + minimize layout shift, then place the result in `style.fonts.googleFontsUrl`. +4. Use an `https:` URL if possible. The application forces Google Fonts URLs to + `https` and preconnects to the fonts domains to start the TLS handshake early + for faster loading. ## `portfolio.json` Reference @@ -71,7 +74,7 @@ The file `portfolio.json` controls what content appears on your portfolio site. ### Styling -The optional `style.colors` and `style.fonts` objects override the default colours and fonts as shown above. The `googleFontsUrl` value should be copied from the `href` attribute of the embed link on [Google Fonts](https://fonts.google.com). +The optional `style.colors` and `style.fonts` objects override the default colours and fonts as shown above. The `googleFontsUrl` value should be copied from the `href` attribute of the embed link on [Google Fonts](https://fonts.google.com) and include the `&display=swap` parameter. ### Portfolio Links diff --git a/pages/_document.js b/pages/_document.js index e1add39..6974bce 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -2,13 +2,21 @@ import Document, { Html, Head, Main, NextScript } from 'next/document'; import getPortfolioProps from '../lib/getPortfolioProps'; const DEFAULT_GOOGLE_FONTS_URL = - "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400"; + "https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400&display=swap"; class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); const { data } = getPortfolioProps(); - const fontsUrl = data.style?.fonts?.googleFontsUrl || DEFAULT_GOOGLE_FONTS_URL; + const fontsUrlRaw = + data.style?.fonts?.googleFontsUrl || DEFAULT_GOOGLE_FONTS_URL; + // Always use HTTPS even if the config omits the protocol or specifies HTTP + let fontsUrl = fontsUrlRaw; + if (fontsUrl.startsWith('http://')) { + fontsUrl = `https://${fontsUrl.slice(7)}`; + } else if (fontsUrl.startsWith('//')) { + fontsUrl = `https:${fontsUrl}`; + } return { ...initialProps, fontsUrl }; } @@ -17,7 +25,22 @@ class MyDocument extends Document { return ( - {fontsUrl && } + {fontsUrl && ( + <> + {/* + Preconnect warms up the TLS and DNS connections for Google's + font domains. This helps fonts load faster and reduces layout + shift before the CSS file is downloaded. + */} + + + + + )}
diff --git a/portfolio.default.json b/portfolio.default.json index f7fac7a..b816653 100644 --- a/portfolio.default.json +++ b/portfolio.default.json @@ -19,7 +19,7 @@ "fonts": { "body": "'lato', sans-serif", "header": "'PT Sans', sans-serif", - "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400" + "googleFontsUrl": "https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400&display=swap" } }, "footer": "Use this repo for your own portfolio site!",