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

1 Like
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?

1 Like
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!

1 Like
4

Oh, by the way!

image
image1214×469 13.7 KB

1 Like
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.

1 Like
6

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

1 Like
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.

1 Like
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.
1 Like
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.

3 Likes
10

This thread was really helpful. In case this helps anyone else, I observed that it is not possible to serve static assets from a hidden directory, like /.fonts. Can someone comment on whether this is a deliberate design choice?

(I had originally hoped to serve the fonts from /.client, to be consistent with the application’s behavior for the built-in iA Writer font.)

1 Like
11

This is a deliberate design choice. Files and folders starting with a . are reserved for internal use. If you just put files on your disk, SB considers them documents and those documents follow the same rules as page names.
The docs aren’t super clear on all that stuff right now, but I’m currently working on a PR, which is going to include a much more extensive page on those rules and why specific page name rules exist.

1 Like
12

Unfortunately, it looks like there was a regression that broke this approach somewhere between an earlier beta release of v2 and the new stable release.

From what I can tell, Silverbullet is still serving the static font files, but the browser seems to receive them with the text/html MIME type rather than font/woff2 (I think). I have filed a report on the GitHub issue tracker; please see there for details.

@MrMugame points out that this was a change introduced in #1507. To reference static files in your space, add .fs/ to the start of the URL path (in other words, src: url('/.fs/fonts/...');). Do not create a .fs/ directory on disk in the SilverBullet space itself.

Learn more in the “File system” section of the HTTP API docs.

2 Likes
13

I was trying to use a specific TTF file (ChicagoFLF)
but when addig thes few lines in my CONFIG in a style-lua block
It changes my default font for a times new roman ??

Very frustrating

And I also would like to use a monospace font for the code blocks, and didn’t find the key

@font-face {
font-family: ‘ChicagoFLF’;
font-display: swap;
font-weight: 400;
font-stretch: normal;
font-style: normal;
src: url(‘/fonts/TTF/ChicagoFLF.ttf’) format(‘truetype’);
}

#sb-root {
–ui-font: “ChicagoFLF” !important;
–editor-font: “ChicagoFLF” !important;
}

Any key ?

1 Like
14

instead of this line:

try to add .fs like mentined above (Trying to get custom font working - #12 by rlue) in the path like this:

src: url(‘/.fs/fonts/TTF/ChicagoFLF.ttf’) format(‘truetype’);

Also the correct codeblock language is: space-style and not style-lua like you mentioned above.

Here is a working example which i use in my space-style codeblock:

@font-face {
    font-family: "UbuntuMono";
    src: url('/.fs/fonts/UbuntuMonoRegular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}
#sb-root {
    --editor-font: "UbuntuMono", monospace;
 }

PS: make sure the font files have the right permissions and didn’t made a typo in your declaration.

1 Like
15

Thankyou, I thought the .fs part was only needed when the file was out of the
space directory.
I confirm: it changes the main page editor with my font…
I still have to find how to keep a monospace font in the code blocks and
it will be perfect !

16

here is my space-style where I define each element where to use which font.
of course this can differ from where and which element you want to use which font:

/* Set the font as root variables*/
#sb-root {
    --editor-font: "UbuntuMono", monospace;
    --ui-font: "Trebuchet MS", "OpenSans", sans-serif;
}

/* set Monospace font for codeblocks*/
span.sb-code{
    font-family: var(--editor-font);
    background-color: rgba(128, 128, 128, 0.2);
}

div .sb-line-fenced-code {
  font-family: var(--editor-font);
  font-weight: 300;
}

/* set monospace font / bold / extra padding  for hashtags*/
.sb-hashtag, .hashtag {
  font-family: var(--editor-font);
  font-size: 1rem !important;
  font-weight: 300;
  padding: 1px 4px !important;
}


/* set Serif/ UI-Font font for CodeMirror content*/

#sb-editor .cm-content {
    font-family: var(--ui-font);
}


/* set a condensed Fonts for mobile devices*/

/* Mobile screens — change to Open Sans Condensed */
@media (max-width: 600px) {
  #sb-root{
   --editor-font: "Inconsolata", monospace !important;
   --ui-font: "OpenSansCond", sans-serif !important;
  }
}
1 Like
17

Your latest post is really what I was looking for.

it shouold have worked on first try…
but I discovered that I had several active pages with space-style blocks.

Now I can proceed with more automation on SB

You made my day !

1 Like
18

You’re welcome.

if you want here are some of my Space-Styles what I use, maybe you’ll find some helpful ones.
some of them are only me fooling around, some others might be helpful.

My recommendations:

  • Set Editor width
  • Cursor Style
  • Custom Tag Colors
  • Filesave Spinner
  • Table of Contents disable title background
  • OfflineMode Badge
  • Button Styles (Default & LibraryManager)
2 Likes