Some fonts don't have cdn links, and spinning up a server / s3 bucket to host them is just a ton of work, here is a quick way to load custom fonts into your obsidian publish vault.
1. In your directory with all .ttf fonts run:
```bash
ls -la | grep '\.ttf' | awk '{print $9}' | xargs -Ixx base64 -i xx -o "xx.b64"
```
2. After that is done run this node.js script in the same dir:
```bash
node generateFontBundle.js
```
```js
// generateFontBundle.js
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync('.').filter(f => f.endsWith('.b64'));
const bundle = [
`(function() {`,
` const style = document.createElement('style');`,
` style.innerHTML = \``,
];
let regularFont = ""
for (const file of files) {
const base64 = fs.readFileSync(file, 'utf-8').replace(/\n/g, '');
const fontName = file.replace(/\.ttf\.b64$/, '');
const fontWeight = /Bold/.test(fontName) ? 'bold' : 'normal';
const fontStyle = /Italic/.test(fontName) ? 'italic' : 'normal';
if (fontWeight == 'normal' & fontStyle == 'normal') regularFont = fontName
bundle.push(`
@font-face {
font-family: '${fontName}';
src: url(data:font/ttf;base64,${base64}) format('truetype');
font-weight: ${fontWeight};
font-style: ${fontStyle};
}`);
}
bundle.push(`\`;`);
bundle.push(` document.head.appendChild(style);`);
bundle.push(`})();`);
fs.writeFileSync('fonts.bundle.js', bundle.join('\n'));
console.log('✅ Generated fonts.bundle.js');
```
3. Paste the contents of `fonts.bundle.js` into your obsidian vault `publish.js` file
4. Set css styles similar to this in your obsidian vault `publish.css`
```css
* {
font-family: "0xProtoNerdFontMono-Regular", monospace !important;
}
```
3. Viola! You should now have custom fonts in your obsidian vault!