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 http://fontforge.org/ 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.

 

Example

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 :

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

http://css-tricks.com/snippets/css/using-font-face/

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: