How to Use Local Font File In custom.css

Questions & Help
1

I have downloaded a local font and I want to be a able to use that font in my logseq theme, but I can’t figure out how to specify the path to the font file in the CSS. Is there a way to use a relative path to the root of the custom CSS file or maybe the logseq graph?

1 Like
2

Aha! I found it. The only true documentation is the source code LOL.

Check out this function:

(defn expand-relative-assets-path
  "Resolve all relative links in custom.css to assets:// URL"
  ;; ../assets/xxx -> {assets|file}://{current-graph-root-path}/xxx

Apparently if you have a ../assets/[something] path in your CSS file it will automatically replace that with the path to the assets dir.

So I was able to do something like this in my custom css:

@font-face {
    font-family: 'Yozai';
    src: url('../assets/../fonts/Yozai-Regular.ttf')
}

.ls-block[data-refs-self*="hanzi"] .block-content {
  font-family: 'Yozai', sans-serif !important;
  font-size: 2.2em !important;
  letter-spacing: 0.03em;
    
  a[data-ref="hanzi"] {
    font-size: 0.25em;
  }
}
Using a local font in a custom theme
3

typically i just install the font and then refer to it by name when declaring font-family

1 Like
4

Have you managed to make this work on mobile? This works on my computer, but not on my Android phone.