Add custom font in theme design in SCP (approach)

[enric101]

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.