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.

2 Comments

You must be Logged on to comment or reply to a post.

Michael Dohse

February 17, 2021 at 10:55 am

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');
}

Marc Porath

February 27, 2023 at 10:56 pm

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

Technical Articles

Add custom font in theme design in SCP (approach)

Assigned Tags