How to add custom fonts manually

Wishlist
,
1

Hey there, As I understood due to busy schedule, adding native solution for custom fonts is getting delayed. But can you share any other way for now to do this manually, until the native feature comes?

1 Like
2

We can achieve this with use of github + jsdelivr cdn.

Here’s a video tutorial:

Here’s examples of what I’ve showed in video:

<style>
    @font-face {
        font-family: 'Helvetica';
        src: url('https://cdn.jsdelivr.net/gh/MrHimiko/fonts/Helvetica.ttf') format('truetype');
        font-weight: 400; 
    }

    @font-face {
        font-family: 'Helvetica';
        src: url('https://cdn.jsdelivr.net/gh/MrHimiko/fonts/Helvetica-Bold.ttf') format('truetype');
        font-weight: 700; 
    }
</style>

Your custom jsdelivr link should be:
https://cdn.jsdelivr.net/gh/<git_username>/<git_repository-name>/<file-name>

Font type formats:

  1. TrueType Font (TTF)
  • File extension: .ttf
  • Format string: truetype
  • Usage in CSS: url('font-file.ttf') format('truetype')
  1. OpenType Font (OTF)
  • File extension: .otf
  • Format string: opentype
  • Usage in CSS: url('font-file.otf') format('opentype')
  1. Web Open Font Format (WOFF)
  • File extension: .woff
  • Format string: woff
  • Usage in CSS: url('font-file.woff') format('woff')
  1. Web Open Font Format 2.0 (WOFF2)
  • File extension: .woff2
  • Format string: woff2
  • Usage in CSS: url('font-file.woff2') format('woff2')
2 Likes
3

Thank You so much for this quick resolution. This will work fine for now, until the native feature comes…
kudos :pray:

4

I managed to add the fonts I needed, but it doesn’t show the option on the font selector after added, it only works if edit each element CSS, changing the fort family name, is there a way to make it possible to select it from the font selector?

5

Yes, custom fonts added this way will not show in dropdown of fonts, you need to add it manually through CSS.

So what you can do is select global body, go to custom css and set:
font-family: 'FontName'

Here’s a quick tutorial, just instead writing ‘Inter’ which was in my case, you need to write name of your font. Adding font this way will apply this font to all of your tags on website.

2 Likes
6

@Pakic can you check the loom video, please?

7

@Pakic Loom video doesn’t work. Seems like this has been reqeusted in Sep 2023. and it’s been 5 months already. It wouldn’t take super long to develop this simple feature. Do you have any ETA for this?

8

Any one please :pray:reupload tutorial on this issue. Need this badly.

1 Like
9

@Pakic Yes :pray: Could you please upload the video again?

1 Like
10

Custom font feature is out now. You can find it from the project settings (same place where you are adding google fonts). We will do a tutorial soon for that, but it is pretty easy to do it even without one :smiley:

4 Likes
11

@Pakic nice! I’m waiting for more :slight_smile: