Как встроить шрифт в CSS
by dmych · 1 thing on Twos
- Когда осваивал Obsidian, очень хотелось настроить его внешний вид так, как мне хотелось. Я очень люблю шрифты семейства IBM Plex https://www.ibm.com/plex/ и его "наследники" — шрифты из приложения iA Writer. https://github.com/iaolo/iA-Fonts
Однако, смартфоны не поддерживают установку своих шрифтов, и сам Obsidian не умеет использовать произвольные шрифты, если они не установлены в системе.
Как же быть? Поскольку внешний вид Obsidian (как и других современных приложений) настраивается через стили CSS, то можно попытаться встроить нужный шрифт в файл темы. Честно скажу, этот способ я подсмотрел в коде темы obsidian_ia. Вкратце идея в том, чтобы внедрить сам шрифтовой файл внутрь CSS, и полученный CSS-файл подключить в Obsidian как сниппет.
Итак, берем файл любимого шрифта в формате TTF и кодируем его в Base64. В Линуксе и на Маке это можно сделать командой base64 -i IBMPlexMono.ttf -o IBMPlexMono.txt. Если у вас другая система, попробуйте поискать утилиту конвертирования для нее, или поищите онлайн-конвертер.
Теперь создадим IBMPlexMono.css, где опишем font-face:
@font-face {
font-family: "IBM Plex Mono";
src: url(data:application/octet-stream;base64,
и сразу за запятой после base64 надо вставить строку закодированного шрифта из IBMPlexMono.txt (это должна быть одна строка символов перевода строки в середине и в конце!), затем добавить закрывающую круглую скобку, точку с запятой и закрывающую фигурную скобку. У вас должно получиться примерно такое:
@font-face {
font-family: "IBM Plex Mono";
src: url(data:application/octet-stream;base64,d09GMgABAAAAAJAoABEA... < тут еще очень много символов >18AA==);
}
Важно, чтобы ваш текстовый редактор не разбил закодированный шрифт на строки, а оставил всё, начиная с "src:" и до точки с запятой в конце одной строкой. Я это делаю обычно в Emacs или Vim.
Это мы сделали только одно начертания шрифта — обычного. Теперь надо повторить ту же процедуру для курсива, жирного и жирного курсива (обычно название шрифтового файла отражает начертание: IBMPlexMono.ttf — обычный шрифт, а IBMPlexMonoItalics.ttf — курсивный). В CSS-файл нужно добавить еще три фонт-фейса, прописав в каждом соответствующие font-weight и font-style.
Для курсива:
@font-face {
font-family: "IBM Plex Mono";
font-style: italic;
Для жирного:
@font-face {
font-family: "IBM Plex Mono";
font-weight: bold;
Для жирного курсива нужно указать и font-weight, и font-style.
Теперь полученный файл нужно положить в папку .obsidian/snippets вашего хранилища в Obsidian, затем в самом Obsidian перейти в настройки > Appearance, и в разделе CSS snippets включить появившийся сниппет, после чего можно подняться наверх в том же окне настроек и добавить ваш шрифт в Interface font, Text font и в Monospace font (можно пойти дальше, и сделать несколько сниппетов с разными шрифтами и использовать разные шрифты для интерфейса, текста и моноширинного). Да, при добавлении имени шрифта в настройках, редактор не даст подсказку с именем — имя нужно ввести руками так, как оно написано в свойствах font-family в файле.
Чтобы шрифт появился на смартфоне, нужно, чтобы синхронизировалось хранилище, причем чтобы синхронизировались и скрытые папки, в этом случае все плагины и их настройки так же будут синхронизированы (если вы не хотите синхронизировать все, тогда просто перенесите файл на телефон руками и так же положите его в .obsidian/snippets и повторите действия в настройках на мобильном).
Если вы всё сделали правильно, то вы увидите свой шрифт в редакторе и на компьютере, и на мобильном телефоне.