Skip to main content

Fonts

Third-Party (ie, Typekit, Google, etc.)​

  • Fonts being hosted by a third-party can be added to the <head> in source/_meta/_head.twig, for example:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  rel="stylesheet"
/>

Local Fonts​

  • Fonts being served locally can be placed in /public/fonts.
  • Font files to be referenced in src/assets/css/core/typography.css using @font-face. For example:
src/assets/css/core/typography.css
@font-face {
  font-family: "Font Name";
  src: url("/fonts/path-to-font.ttf.woff") format("woff"),
    url("/fonts/path-to-font.ttf.svg#path-to-font") format("svg"), url("/fonts/path-to-font.ttf.eot"),
    url("/fonts/path-to-font.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

(the formats that are in use here and the particular @font-face code may vary - use the code that is typically provided by the webfont provider - above is just an example)

  • Set font-display: swap; on all for performance reasons