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
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.
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
.
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:
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.
Last updated