Trying to get custom font working

v1: Troubleshooting
1

I’m trying to change default font to Iosevka Etoile and facing weird issues.

I thought I’m being very clever putting folder fonts/TTF/ containing Iosevka TTF files in it right inside space directory. Now I can access font files like this: https://${host}/fonts/TTF/IosevkaEtoile-Regular.ttf

Then I added this to the space-style thingy:

@font-face {
    font-family: 'Iosevka Etoile Web';
    font-display: swap;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    src: url('/fonts/TTF/IosevkaEtoile-Regular.ttf') format('truetype');
}

#sb-root {
   --editor-font: "Iosevka Etoile Web", !important;
}

Aaaaand. It doesn’t work, obviously :slightly_smiling_face:

P.S. iA Mono is great, but for cyrillic it doesn’t work very well, unfortunately

2

When you open your browser tools, e.g. your JavaScript inspector, do you see any errors there? Or in your Networks tab, do you see (an attempt) at the font being fetched?

I’ve not tried this with font files served from the space directly, I do know others use externally hosted fonts (so they put in the full URL to an external site instead of a local one), does this work for you?

3

No attempts to load the font in Network, no visible errors too, but I can see custom CSS loaded.

On my way checking external sources, will let you know about results. Thanks!

4

Oh, by the way!

image
image1214×469 13.7 KB

5

I can confirm that my smart-assness with putting font files in space directory actually works!

In the end of the day it’s me being stupid and not knowing CSS:

image
image1961×1206 130 KB

The problem was comma before !important. Cautght it by chance in devtools.
Sorry for the noise.

6

Great. I’m sure this will be useful to some person in the future.

7

Hi, thanks for this solution and I made it works on my instance as well.

Out of curiosity, I want to ask @zef if this work when the SB enters offline sync mode? I don’t have much knowledge on web, but it seems to me that SB will try to fetch the font in offline mode per Link and likely to fail, is that the case?

Update: I made a test on my mobile phone and it worked fine. But I’m still curious on the underlying reason.

8

Happy to hear that it works as it should :wink: The way it works:

  1. A local copy of all files in your space, including your font file is kept locally in an IndexedDB upon a full sync.
  2. In sync mode A service worker is intercepting file fetches, also for that font file and handles them locally without using the network.
9

Thanks for the detailed explaination! Another thing I find relevant yet a separate problem is to make a secondary font (mainly for the CJK character overwrites), it is currently not working with the following config I adapt from the example.

@font-face {
    font-family: 'Iosevka Nerd Font Mono';
    font-display: swap;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    src: url('/fonts/TTF/IosevkaNerdFontMono-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'LXGW WenKai';
    font-display: swap;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    src: url('/fonts/TTF/LXGWWenKai-Regular.ttf') format('truetype');
}

#sb-root {
   --editor-font: "Iosevka Nerd Font Mono", "LXGW WenKai" !important;
}

I think it might be convenient for the future visitors therefore raise this here.