Log in Sign up

Using a custom typeface?

I have purchased some font files (.ttf, .woff) which I would like to use on my blog. How do I change the font?


3 years ago, 1 replies   Edit question

Te first thing to understand is that Blot behaves like a static file server.

This means that you can host the font files from your blog's folder directly.

For example, if you put the file, e.g. regular.ttf inside a folder called fonts inside your blog's folder, then you would theoretically be able to download/embed the file at the following URL:

your-blog.blot.im/fonts/regular.ttf

With that said, you will then need to edit your site's CSS file to load the fonts. To do this, first fork an editable copy of your template, if you haven't done so already.

Then open up your template's CSS file (usually style.css) and paste in the required @font-face rules. For example, let's say your font file was called murmur.woff and you had put it inside a folder called fonts in your blog's folder:

@font-face {
  font-family: 'Murmur';
  src: url('/fonts/murmur.woff') format('woff');
}

Then you could use the font in your template's style.css file like so:

body {
  font-family: 'Murmur';
}

The above represents a simplified example: in reality you will likely have multiple files representing multiple weights and styles of your custom typeface. But the principles explained above should get you started.

Please let me know if you have any questions about this

Answered 3 years ago ยท Edit answer