Use any font

Yesterday a customer specifically requested me a font for his web page menu. Of course this was not Arial. After much struggle I found a surprisingly simple solution using CSS.

To do this we use the @ font-face rule and fonts in Open Type (. Otf) or True type format (. Ttf)

This method works for Internet Explorer 4 (haven’t tested yet), Firefox 3.5 and Safari 3.

Download the font kit. Fontsquirrel has a section for @font-face kits: Fontsquirrel http://www.fontsquirrel.com/fontface these kits have both. Tft like. Otf for explorer, and the best the kits are FREE.

For this example I’m using Highland Gothic

After downloading the kit we need to upload it to the main directory of our website. Only the fonts NOT THE CSS demo nor the THAT COMES IN THE KIT (stylesheet.css).

For wordpress folder we upload it in our theme folder (wp-content/themes/example)

Now open the style.css file that is included in the kit (stylesheet.css) and copy the complete rules

Open the style sheet of our theme and paste the complete rules.

Apply the font style on the section you want on your page, an H1, etc.. In this particular case I apply it in the properties menu 2.

To do this just type the name of the typeface as shown on the demo track as a first option and select a second choice. In this case it was Arial.

Upload your stylesheet and that’s all. On my client site is working to perfectly

Now you can use any font on a website

If you have any questions or a different  method please send us your feedback.

Previous post

How and how much to charge for graphic design

Next post

57 high resolution car textures

The Author

Javier Cantero

Javier Cantero