Adding custom fonts in headers and footers
Ever wanted to make your PDF headers and footers stand out with unique typography? You're in luck! PDFShift now lets you add custom fonts to your headers and footers, giving your documents that extra touch of personality and brand consistency.
How it works
Headers and footers in PDFs are special - they're separate from the main content and can't make network requests. But don't worry, we've got a simple solution: base64 encoding your fonts.
Here's what you need to know:
Encode your font file as base64
Include the encoded font in both the header/footer AND the main document (this is important)
Use the font in your custom header or footer styles
Our converter will first load your main page, and include all the fonts used in the generated PDF. That's why you need to use the font in the main body (and not only include it in the CSS).
Then, it will process your header/footer, and find that the font is already used there, so it will re-use it.
Example
{
"source": "<div><style>@font-face {
font-family: 'MyFont';
src: url('data:font/truetype;charset=utf-8;base64,...base64 here ...') format('truetype');
}
h1 {
font-family: 'MyFont';
color: #000;
}
</style><div><h1>This is the body</h1></div></div>",
"header": {
"source": "<div><style>@font-face {
font-family: 'MyFont';
src: url('data:font/truetype;charset=utf-8;base64,...base64 here ...') format('truetype');
}
h1 {
font-family: 'MyFont';
color: #000;
}
</style><div><h1>This is the header</h1></div></div>",
"height": 150
}
}But if you want to load a page via its URL and add a custom header with a custom font, you can do the following:
{
"source": "https://www.google.com",
"css": "@font-face {
font-family: 'MyFont';
src: url('data:font/truetype;charset=utf-8;base64,...base64 here ...') format('truetype');
}
h1 {
font-family: 'MyFont';
color: #000;
}",
"header": {
"source": "<div><style>@font-face {
font-family: 'MyFont';
src: url('data:font/truetype;charset=utf-8;base64,...base64 here ...') format('truetype');
}
h1 {
font-family: 'MyFont';
color: #000;
}
</style><div><h1>This is the header</h1></div></div>",
"height": 150
}
}In this case, the css parameter must match an element in the page for the font in the header/footer to work, but in general, since you want to have the same font between your body and header/footer, this shouldn't pose any issues.
Finally, we tested with Truetype (ttf) and Woff2 successfully.
Quickly encoding a font in base64
We suggest this tool to let you paste a Google Font link and get back the base64 converted font directly: