Skip to Content
Technical Articles
Author's profile photo Enric Castella Gonzalez

Add custom font in theme design in SCP (approach)

Hi!

This post is probably going to be obsolete in a while. But I want to document my approach to how to add custom fonts to the theme design.

In this case we needed to add a custom font on the theme we are working with. The problem with the font is that it is not available on public internet sites like google fonts.

We have two options, upload the source in some public repository or add base64 font.

Let’s see how to do the second option:

  • First of all, it is necesary you need to convert the font to base64. You can use an only application like https://base64.guru/converter/encode/file
  • Now, you can access to the theme design and go to “css” button

  • We will add a new css entry like this (where you need to add your font file in CSS):
@font-face {
    font-family: 'yourFontName';
    src: url(data:font/truetype;charset=utf-8;base64,<<your_font_in_base64>>) format('truetype');
}
  • Now you can change the default font in mode “Expert”. In this point you need to add the name added in CSS “font-family”.

And your font is already available in your theme.

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Dohse
      Michael Dohse

      Works even with several fonts, thanks for sharing this!

      @font-face {
          font-family: 'myFontBold';
          src: url(data:font/truetype;charset=utf-8;base64,<<myFontBold_in_base64>>) format('truetype');
      }
      @font-face {
          font-family: 'myFontLight';
          src: url(data:font/truetype;charset=utf-8;base64,<<myFontLight_in_base64>>) format('truetype');
      }
      @font-face {
          font-family: 'myFontMedium';
          src: url(data:font/truetype;charset=utf-8;base64,<<myFontMedium_in_base64>>) format('truetype');
      }
      Author's profile photo Marc Porath
      Marc Porath

      Always a pleasure seeing your name when searching for some stuff 😀