How to Embed a Custom Font in CSS
by dmych · 13 things on Twos
- I use this method to have a custom font in applications like Obsidian or Logseq that allow customization via CSS. Moreover, this font will be used both in the desktop version and on a smartphone.
- I spotted this method from the author of the old topic obsidian_ia and really like it.
- So, first of all, take your favorite font file in TTF format and encode it in Base64. On Linux or MacOS you can use something like this:
- base64 -i IBMPlexMono.ttf -o IBMPlexMono.txt.
- Now open your CSS file (or create a new one) and add to the beginning:
- @font-face {
font-family: "IBM Plex Mono";
src: url(data:application/octet-stream;base64,<FONT DATA>);
}
- Just replace <FONT DATA> with the base64 encoded font data you got before.
- It is important that your text editor does not break the encoded font into lines, but leaves everything from "src:" to the semicolon at the end as one line. I usually do this in Emacs or Vim.
- Repeat these steps for bold and italic styles as needed, adding appropriate properties to the font descriptions.
- For the bold italic you should use both font-weight: bold and font-style: italic.
- Now the font is built into your CSS, it may not be installed in the OS, the application does not have to download it from anywhere, you just have it and you can use it in the interface:
- body {
font-family: 'IBM Plex Mono';
font-size: 17px;
}
- In Obsidian, I created several snippets with different fonts, and I can change the fonts simply through the application settings. For Logseq I had to make several versions of custom.css. And I'd love to have a similar thing here at Twos as well.