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
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.
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.
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.
