[SOLVED] How do I use external fonts in web pages

Ever wanted to know how to add fonts to a webpage using Google fonts or a downloaded font file? Or ever need to convert fonts to different formats to improve cross browser support? There are simple solutions to both.

Questions this guide answers

How do I convert fonts into different formats?
How do I add new fonts to my web pages and websites?
What code do I need to use to make a web browser use a font installed in my website?
How do I install a non standard font into my website?
Where can I get free fonts?
Where can I convert ttf files to other formats.

How to add Google fonts to a website

This works for any website whether you use WordPress, Joomla or HTML etc…

Go to http://www.google.com/webfonts
Find a font you like
Click Quick Use
Choose font style options if any are presented
Blue box ‘3. Add this code to your website‘ has three tabs. Click the second tab labelled @import
Copy the code. It looks something like this: @import url(http://fonts.googleapis.com/css?family=Sanchez);
Paste the code into your site’s CSS style sheet, usually called style.css.

If you don’t have a style sheet you can place it between the page header tags like this:

<head>
   <style>
      @import url(http://fonts.googleapis.com/css?family=Sanchez);
   </style>
</head>

In this case, it is import to place the code between the <style></style> tags within your header i.e do not copy and paste <header> or </header>.

If you use WordPress, you can place it in your theme settings or you can install a plugin like header-footer to place the code in your theme’s header scripts like so:

<style>
   @import url(http://fonts.googleapis.com/css?family=Sanchez);
</style>

Next you need to specify where the font should be used.

Copy the code in the blue box ‘4. Integrate the fonts into your CSS‘
Paste the code into your theme’s CSS style sheet or in the page header between <style></style> tags
```
<style>
html,
body,
body *,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
input,
textarea,
form,
table {
   font-family: 'Sanchez', serif;
}
</style>
```
Remove the style tags if placing this directly into your stylesheet. Replace font-family: ‘Sanchez’, serif; with the code provided by Google in box 4. You can use the font with specific tags by specifying those tag selectors only such as p or a or h1 without the other selectors shown above.

Adding downloaded fonts to your website

Font files are usually provided in TTF format. Any font can be added to a website but not all web browsers can use any font format. Common web usable formats are TTF, EOT, WOFF and SVG. When using fonts in web pages we need to specify different font file formats for different web browsers.

This is easier than you might think. Use the Fontsquirrel @font-face generator to upload your TTF font and download a font kit packed with the CSS, the needed font formats and the instructions for making your font work in different web browsers.

Grab a font from Fontpalace.com
Visit @font-face
Upload your font
Tick the box next to “Yes, the fonts I’m uploading are legally eligible for web embedding.“
Download your font kit
Open the zip file
Load the named *-font.html (where * represents the font name) and follow the given instructions.

If the font you want to convert is blacklisted by @font-face, use the converter at font2web. It does pretty much the same thing.

Said it’s easy.

Extra Tip: here’s a generic font converter: freefontconverter.com

Leave comments tips, links to free font providers and questions below.