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: