Embedding Custom Fonts With CSS

If you ever need to embed custom fonts in your website, this bit of CSS will accomplish the task. Follow the steps below to embed custom fonts in your website.

Using TrueType Fonts From Your Server

1. Use this font conversion tool to convert your TrueType font from .ttf format to OpenType, .eot format. Both file types are needed. The .eot format is necessary for Internet Explorer while other browsers will use .ttf format.
    
2. Save or upload the .eot and the .ttf files to your web server. A directory named “fonts” would be a good place to store the font files.
    
3. Create three new CSS files. For this example, I will name the three CSS files style.css, fonts.css, and ie-fonts.css. ie-fonts.css is for Internet Explorer, fonts.css is for the remaining browsers, and style.css is for the remaining CSS settings for the webpage.
    
4. In ie-fonts.css, the font-face source will be the .eot type files. Insert the following example code into ie-fonts.css, adding your .eot file as the source (src).

   @font-face {
     font-family: MyCustomFont;
     src: url('fonts/my-custom-font.eot'); /* Edit this line */
   }

   You may add as many custom .eot type fonts as you wish.
    

5. In fonts.css, the font-face source will be the .ttf file. Insert the following code into fonts.css, adding your .ttf file as the source (src).

   @font-face {
     font-family: MyCustomFont;
     src: url('fonts/my-custom-font.ttf'); /* Edit this line */
   }

   You may add as many custom .ttf type fonts as you wish.
    

6. While using multiple custom fonts, the font-family name for each custom font must be unique. In the below example, there are three different custom fonts, each with a unique font-family name.

   @font-face {
     font-family: MyFirstCustomFont; /* Edit this line */
     src: url('fonts/my-first-custom-font.ttf'); /* Edit this line */
   }
   
   @font-face {
     font-family: MySecondCustomFont; /* Edit this line */
     src: url('fonts/my-second-custom-font.ttf'); /* Edit this line */
   }
   
   @font-face {
     font-family: MyThirdCustomFont; /* Edit this line */
     src: url('fonts/my-third-custom-font.ttf'); /* Edit this line */
   }

7. In style.css, use the custom font(s) in your style definitions as in the following example. Notice how the font-family name is used from your custom font(s).

   p{
       font-family: 'MyFirstCustomFont', Arial, Helvetica, sans-serif;
   }
   
   h1, h2, h3, h4, h5, h6{
       font: 100% 'MySecondCustomFont', Arial, Helvetica, sans-serif;
   }
   
   a{
       font-family: 'MyThirdCustomFont', Arial, Helvetica, sans-serif;
   }
   

    

8. Include all three files before the </head> tag in your webpage. Be sure to include all three files in the same order as in the following example.

   <link rel="stylesheet" type="text/css" media="all" href="fonts.css" />
   <!--[if IE]>
   <link rel="stylesheet" type="text/css" media="all" href="ie-fonts.css" />
   <![endif]-->
   <link rel="stylesheet" type="text/css" media="all" href="style.css" />

   As seen in the above example, a conditional statement was added for Internet Explorer.

   <!--[if IE]>
   <link rel="stylesheet" type="text/css" media="all" href="ie-fonts.css" />
   <![endif]-->

   This conditional statement causes other browsers besides Internet Explorer to ignore ie-fonts.css. Only Internet Explorer will use ie-fonts.css.
    

Using Google Web Fonts

Google Web Fonts offers website developers an alternative to using the method I previously described. Google Web Fonts is a free font directory of web-safe fonts, which can be downloaded and used locally, or can be linked to remotely from Google’s servers.

It’s easy to embed Google fonts into your own webpage. Follow the steps below.

1. Go to Google Web Fonts and select a font you like.
2. Press the "Quick-use" button for the font you selected.
3. Follow the steps which are outlined on the Quick-use page.