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 ?

You also might want to add EOF fonts for Windoze support: http://stackoverflow.com/questions/6437061/convert-arabic-ttf-otf-fonts-to-woff-eof — Raydot, Jul 16 '14 at 16:33

score 154 · Answer 1 · answered Jul 17 '12 at 17:06

154

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.

answered Jul 17 '12 at 17:06

fguillen

36,125
23
149
210

This totally rocks it! Thanks! – mpemburn Sep 19 '13 at 17:18
4

Is this cross-browser compatible @fguillen ? – Ali Gajani May 11 '14 at 13:18
5

@AliGajani https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Browser_compatibility – kevin May 12 '14 at 08:02
2

It was fontsquirrel that fixed the issue for me, from the link posted above. Thanks! I recommend people try fontsquirrel. – Marcel Marino Jun 07 '15 at 19:12

score 8 · Answer 2 · answered Dec 03 '18 at 09:37

8

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;

answered Dec 03 '18 at 09:37

Andy Hoffman

18,436
4
42
61

This is a good service if you only need English fonts, it cuts fonts in other languages. Just keep in mind – AC1D Mar 19 '21 at 14:31

score 6 · Answer 3 · answered Nov 24 '10 at 13:48

6

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.

answered Nov 24 '10 at 13:48

ChrisF

134,786
31
255
325

score -3 · Accepted Answer · edited Jun 20 '20 at 09:12

-3

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 29 '10 at 21:40

James Reategui

1,307
2
16
23

7

Not answering the question. – Asim K T Feb 24 '18 at 07:46
7

This answer is 8 years outdated and was a good answer back then. For modern browsers I'd recommend HTML5 TTF in css. – James Reategui Apr 05 '18 at 18:45

Using True type fonts in web applications

4 Answers4

Linked