Using True type fonts in web applications

HtmlPerformanceBrowserFonts

Html Problem Overview


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 ?

Html Solutions


Solution 1 - Html

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 2 - Html

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 3 - Html

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;

enter image description here

Solution 4 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSudantha View Question on Stackoverflow
Solution 1 - HtmlfguillenView Answer on Stackoverflow
Solution 2 - HtmlChrisFView Answer on Stackoverflow
Solution 3 - HtmlAndy HoffmanView Answer on Stackoverflow
Solution 4 - HtmlJames ReateguiView Answer on Stackoverflow