How to add custom fonts manually

Wishlist
,
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