Using True type fonts in web applications
HtmlPerformanceBrowserFontsHtml 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; }
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;
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.