Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
6 years ago

embed a font in custom visual

I am trying to use Bebas Neue for my custom visual.  If a user's machine has Bebas Neue installed, everything looks fine.  But if the user doesn't have Bebas Neue font installed, the whole visual wen...
Need Help
jppp's avatar
jppp
Continued Contributor
6 years ago

Hi Anonymous ,

 

You can easily use the CSS with the @font-face route with the font file (*.woff e.g.) as a base64 encoded string, like below:

@font-face {
  font-family: <FontName>
  src: url(data&colon;application/font-woff2;charset=utf-8;base64,<Base64String>) format("woff");
}
-JP
  • Anonymous's avatar
    Anonymous
    Not applicable
    6 years ago

    jppp 

    Where exactly should I put this piece of code and where should I put the font file?

    thanks.

     

    jppp wrote:

    Hi Anonymous ,

     

    You can easily use the CSS with the @font-face route with the font file (*.woff e.g.) as a base64 encoded string, like below:

    @font-face {
  font-family: <FontName>
  src: url(data&colon;application/font-woff2;charset=utf-8;base64,<Base64String>) format("woff");
}
    -JP

     

    • jppp's avatar
      jppp
      Continued Contributor
      6 years ago

      Hi Anonymous ,

       

      The code snippet should be in the CSS file, preferable at the top.

      And you only need your font file to generate a Base64 encoded string (eg via https://base64converter.com/) which you include in the CSS file.

       

      -JP