Replace a logo image – Make use of @font-face

Don’t you know already that there is no need of an image to make a clean looking Text logo ?

Using a font of your own or one you’ve downloaded from the many free fonts websites available on the Internet, is possible without much code.

The @font-face style tag is here for us and highly compatible by most browsers including IE, Chrome, Mozilla, Opera, Safari…

However as you will notice below, there is a need to build different format of your font.

But let’s start with the CSS :

@font-face { font-family: Thefont; src: url("Thefont-Regular.otf") format("opentype"); src: url('Thefont-regular-webfont.eot'); src: url('Thefont-regular-webfont.eot?#iefix') format('embedded-opentype'), url('Thefont-regular-webfont.woff') format('woff'), url('Thefont-regular-webfont.ttf') format('truetype'), url('Thefont-regular-webfont.svg#quadrantaregular') format('svg'); } /*Optionally :*/ @font-face { font-family: Thefont; font-weight: bold; src: url("Thefont-Bold.otf") format("opentype"); src: url('Thefont-bold-webfont.eot'); src: url('Thefont-bold-webfont.eot?#iefix') format('embedded-opentype'), url(Thefont-bold-webfont.woff') format('woff'), url('Thefont-bold-webfont.ttf') format('truetype'), url('Thefont-bold-webfont.svg#quadrantabold') format('svg'); }


Building the formats

You need to generate the Web format of your font :

  • otf is the one you built or obtain
  • eot format is for our old friend Internet Explorer
  • woff for modern browsers
  • svg for older Chrome and legacy browsers
  • ttf for Android, iOS, Safari

There are websites such as font2web who propose to automatically build the webfont package for free.

If you prefer to use an offline tool, you may use and other tools. We let you pick up the solution you like and search the documentation about that. Let’s get back to our work.



Using the CSS you added before, you can define some tags such as H1 to automatically render the font of your choice :

h1 { color             : #454545; font-size      : 2.2em; font-family : Thefont; }

Noticed the name of the Thefont ?

When you take a look to your css, you will see that matches the font-family name, you may choose the name of your choice if you made your own font.


Under the optionally comment we defined a font to use to render bold items, in case you use different fonts for bold and normal. You may add one for italic also.


More information here :

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: