Using True type fonts in web applications

Question

Present I see lot of web sites use true type fonts. I want to to know how to use true type fonts in our applications and does it affect the load time of the pages ?

Solution 1

Font embedding can be a bit complicated due to browser compatibility issues. For example, Safari only supports SVG fonts. IE only supports .eot, which must first be converted from .ttf

I have found the easiest way to use custom fonts is with Google Fonts Besides having the free google font directory to choose from, there are a few providers that provide a much wider selection of fonts for free and to purchase.

Solution 2

HTML5 allows to use TTF fonts in your CSS:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

To use it:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Check more information in html5rocks.

Solution 3

You use Font Embedding.

It will affect the overall load time of the page as the font data has to be downloaded as well as the other content, styles etc. However, it will be cached so only impacts on the first view of the page.

Solution 4

I want to update the accepted answer due to a significant passage of time. The following is what Font Squirrel outputs under their recommended 'Optimal' setting. Supporting .ttf at this point is no longer important and should be ignored.

font-family: 'Tagesschrift';
  src: url('tagesschrift.woff2') format('woff2'),
       url('tagesschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;

View more solutions