Embedding Fonts in my Blog?


When I recently posted about the font “FrakturMelanie Kissel asked a question via facebook:

how in the world do you take the fonts you download and use them on your blog?? I have yet to figure that out and it’s a shame because I’ve got quite a large collection of fonts waiting in the wings. 🙂

A very good question I have to admit.

Usually you have to change the programming of your website.

Go deep inside the style-sheet and change it.

Problem is: if you don’t have good knowledge of programming you can destroy your website.

Just have a look at some parts of the style-sheet of my website:

blockquote {

background: url(“images/blockquote.gif”) no-repeat top right;

color: #644a3d;

font: 14px Georgia, “Times New Roman”, serif;

line-height: 22px;

margin-left: 30px;

padding: 5px;

This is the font definition of the quote I have just displayed.

It says that we have a left margin of 30px, the line is 22px high and the fontsize is 14px.

The system is supposed to use Georgia.

If you don’t have installed Georgia on your computer, than it will switch to Times New Roman. If that is not available it will use any serif font!

My blog-body demands

font: 12px “Helvetica Neue”, Helvetica, Arial, sans-serif;

First it will look for Helvetica Neue, than for Helvetica and Arial and than for any sans-serif.


And it doesn’t matter how big my font library is, your font library is the one that counts in this case. You are the user and so it has to look on your computer.

This means, that every website is displayed differently on every computer.

We can’t influence the appearance in the way we can influence the appearance of a printed product.


What to do?

Sure I would love to tweak my style-sheet a bit.

But what if I fail? My website will be destroyed!


Usually I just change the color of my headlines.

And if I think my text demands a special headline, I would create an image-file via Photoshop.
Make sure that the file has the same width than the blog-body.

Safe it as png to safe the transparency and upload it instead of a headline.

Use transparency because the background of your blog will shine through.
You can also add shadows – or a background if you like!

No transparency - but displaying a chalkboard

For self hosted WordPress-sites might be a pluging available.
Personally I am not such huge plugin fan anymore after one plugin destroyed 2 sites of me.



Single Post Navigation

3 thoughts on “Embedding Fonts in my Blog?

  1. Pingback: Add the right Tag and save Space « Helz-Design

  2. Great advice, Helen. Thanks!!!! I’ll be trying that in about a month.

%d bloggers like this: