How to add a font to Blogger

Although Blogger already provides a number of different web fonts, it is sometimes useful to add new fonts, e.g. Arabic fonts or other languages that don't have good standard fonts. You can add any font to Blogger in these easy steps.

Wikipedia

Step 1

Convert your font into formats readable by web browsers. For example, if you have .ttf (true type font) file or .eof (embedded open font) file, you need to generate other formats as well. Two of the websites that provide this service online are below. You need to upload your font file, and then the generator will provide you with a zip file with all the generated font files and sample .css and .html files.

• Font2Web

• Fonts Squirrel

Step 2

You need to upload the font files generated by any of the services above to a server. Specifically, you will need to copy the files .eot, .svg, .ttf, and .woff. If you have a website or a server, that is fine. Otherwise, you can just upload them to your Dropbox account. Put them in a public folder, and make note of their "Public Link", which you can get by right-clicking on a file and choosing "Copy Public Link". It is something like "https://dl.dropboxusercontent.com/u/xyz/file_name.ttf" where xyz is some number specific to your folder and username.

Step 3

Go to your blog, and open Template->Customize then choose Advanced->Add CSS. Then copy/paste code like the following (replace your font name instead of "Font Name"):

@font-face {
 font-family: 'Font Name';
 font-style: normal;
 src:
  url(https://dl.dropboxusercontent.com/u/9991107/Font_Name.eot) format('embedded-opentype'),
  url(https://dl.dropboxusercontent.com/u/9991107/Font_Name.woff) format('woff'),

  url(https://dl.dropboxusercontent.com/u/9991107/Font_Name.svg) format('svg'),
  url(https://dl.dropboxusercontent.com/u/9991107/Font_Name.ttf) format('truetype');
}

.post-body, h1.title, h2, .description, body, h3.post-title {
  font-family: 'Font Name', serif;
}

Resources

• Google web fonts
• More comprehensive instructions: How to add and use custom fonts in blogger