Using different fonts in header and footer

As stated in our header and footer documentation, they do come with some caveats. Since the content of the CSS tab does not apply inside header and footer, fonts won't apply either.

That said, there's a rather technical solution you can use to bring your header and footer on par with the rest of the content.

Inlining Google Fonts in your header/footer content

Step 1: Get the fonts CSS

Select the fonts your want on Google Fonts, then get the URL they provide and copy it's content. Let's take the Dancing Script font and only select it's Regular 400 variant. The URL we get is https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap

Upon visiting this URL the content we get is as follows

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep6hNX6plRPjLo.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp6hNX6plRPjLo.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

You can start by copying this content.

Keep only what you need

Unless you care about Vietnamese or extended Latin characters, you can just keep the "latin" section. It will cover the basic alphabet plus most of the western European alphabets and accents.

Step 2: Replace fonts URL with their data-uri content

Since fonts cannot be loaded from URL in the header and footer, you'll need to replace the Google Fonts URL with a data-uri version.

You can find very good online converters that will do that for you. Some of them simply take a URL as input and will give you the data-uri version in return.

You can now replace the URL with the data-uri text you got.

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:font/woff;base64,d09GRgABAAAAAG6...') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Mind the quotes

Notice that when replacing the URL we also surrounded the content with quotes. Don't forget to do so.

Step 3: Replace the data-uri scheme

As-is, the font will not work and the generation will fail. To make it work, we'll need to remove what is called the MIME type of the data-uri content. Simply remove anything between data: and ;base64.

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:;base64,d09GRgABAAAAAG6...') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Step 4: Give your header/footer some style

Now that we do have our font CSS working, you can add it to your Template. Head to the Settings tab and enable the Advanced header/footer.

You can then paste you font CSS in a <style> tag:

Settings > Header

<style>
  /* latin */
  @font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data:;base64,d09GRgABAAAAAG6...') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  #header, #footer {
    font-family: 'Dancing Script';
  }
</style>

<div>This text should be using Dancing Script</div>

Header and Footer styles are shared

You don't need to duplicate the font import in both header and footer as any style defined in one also applies to the other. That's why we can use the #header, #footer selector in the above example.