0

I want to use a custom font in the header of the pdf file.

Using the font name only works properly on systems where that font exists

Accepts the text inside the body of the font using the following code, but does not work for headers

I do not want to use Google fonts and I want to use my own custom fonts

     @@font-face {
            font-family: 'hpf';
            font-style: normal;
            font-weight: normal;
            src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAPAIAA...) format("truetype");
        }



       * {
            font-family: 'hpf' !important;
        }
parsa
  • 29
  • 1
  • 5

1 Answers1

0

I accomplished this using woff, woff2 and ttf files, but haven't tested it with base64. However, if you can't make it work with base64 format, you can choose to convert to the other formats. If this is the case, you could make use of https://onlinefontconverter.com (please, check this link), or any other conveter you prefer.

Here is a sample HTML file I have tested in my project (to clarify, I just changed the font name I used to MyFont):

<!DOCTYPE html>

<head>
    <style>
    @font-face { font-family: 'MyFont'; src: url('../../../Content/fonts/MyFont.woff2') format('woff2'), 
                      url('../../../Content/fonts/MyFont.woff') format('woff'), 
                      url('../../../Content/fonts/MyFont.ttf') format('truetype') }
        .custom-font-text {
            font-family: 'MyFont' !important;
        }
    </style>
</head>

<div>
    Normal text <div class="custom-font-text">Text with custom font</div> 
</div>

Please, also pay attention to the URLs, as they're crucial to make this approach work. In my case, font files are stored inside a folder called fonts, which is inside a folder called Content, in project's root folder (/Content/fonts). The final So I have to use "../" each time I want to go backwards from my /Views/Documents/PDF folder, where the header is placed.

EDIT (Base64 testing):

Tested successfully using base64. Here is my code:

@font-face {
    font-family: 'MyFont';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAOA...) format('truetype');
}
.custom-font-text {
    font-family: 'MyFont' !important;
}

As far as I can see, the only difference with yours is that I'm using simple quotes on format("truetype"), but seems to have no real impact, as it also works with double quotes.

As your problem might be on the base64 encoded data, I would recommend you to generate the base64 using a tool like this:

https://www.fontsquirrel.com/tools/webfont-generator

Checking these options: ttf (as FontFormats), Keep existing (as TrueType Hinting) and Base64 Encode (as CSS) will generate a complete kit to test your font. For your information, please, have in mind that this tool requires to accept an agreeement clause which states that your font is legally eligible for web embedding.

Check this post to read a complete walkthrough to properly generate the kit and more useful info:

https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html

Dave Miller
  • 536
  • 3
  • 19