Using font in Web

Question

Can anyone tell me how to unify the font I use in all browsers in different operating systems ??

possible duplicate of [Non-Standard fonts in web?](http://stackoverflow.com/questions/2969323/non-standard-fonts-in-web) — Pekka, Jul 13 '10 at 09:00

score 3 · Answer 1 · answered Jul 13 '10 at 12:59

3

There is also a similar service from Google:

Google Font API

For now it supports only a few fonts, but it is really simple to use.

answered Jul 13 '10 at 12:59

Brunno Gomes

125
1
3

I tried using the google font API, I tried it on Firefox, Chrome and IE8 (Windows) ... Firefox, Safari and Chrome (Mac) ... Firefox and Chrome (Linux) ... It worked on all of them except for Firefox Mac and Firefox Linux ! but it really so simple to use ... One more thing i noticed, although i specified that i want the font size to be 18px, still the size was different on different browsers, anything can be done regarding this ?? – Naruto Jul 13 '10 at 13:50

score 1 · Answer 2 · answered Jul 13 '10 at 09:01

1

Modern browsers support downloading fonts which can be used in any web pages - More here: https://developer.mozilla.org/en/css/@font-face

answered Jul 13 '10 at 09:01

Veera

32,532
36
98
137

1

Unfortunately 'Web' is not based on 'modern browsers' only. – Piotr Rochala Jul 13 '10 at 09:10
I visited the link you sent me and did what it said, but it didn't work on all browsers, the file extension I included is .ttf ... it didn't work on IE windows, firefox Mac and it didn't work at all on Linux ... any other suggestions ?? Thanks – Naruto Jul 13 '10 at 09:45
@rochal — “Unfortunately 'Web' is not based on 'modern browsers' only.” IE 4 (yes, *four*) and above support `@font-face`, as do Firefox, Safari, Chrome and Opera. What more do you want? – Paul D. Waite Jul 13 '10 at 09:55
@Naruto — have a look at Font Squirrel as suggested by Jaison. They aim to sort out the differences in the font formats supported by different browsers. – Paul D. Waite Jul 13 '10 at 09:56
1. here's a good article explains about @font-face cross browser support - http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ 2. Browser support for @font-face - http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support – Veera Jul 13 '10 at 10:30

score 1 · Answer 3 · answered Jul 13 '10 at 09:50

1

to use different font you can use font squirrel service font squirrel link

in font squirrel go to @font-face kits or you have your own font to put go to @font-face generator and upload your font and generate your font pack

answered Jul 13 '10 at 09:50

Jaison Justus

2,753
8
47
65

I downloaded one of the kits and it worked fine almost on all browsers, but not on firefox Mac and firefox Linux ... – Naruto Jul 13 '10 at 10:38
please check out this link. its a video tutorial on how to use font squirrel.... http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/ i think this will help you!!! – Jaison Justus Jul 13 '10 at 10:54
i happy to know that you understand how to use font using font-squirrel service.... have a nice day – Jaison Justus Jul 13 '10 at 11:31

Paul D. Waite · Answer 4 · 2011-11-21T07:54:02.113

Take a look at the @font-face declaration in CSS.

There’s a good overview on A List Apart:

http://www.alistapart.com/articles/fonts-at-the-crossing

@font-face isn’t super-simple:

different browsers support different font formats (a bit like video in HTML5)
and slightly different syntaxes
and a lot of commercial fonts aren’t licensed for use on the web

However, there are services like Font Squirrel, TypeKit and others that help simplify it.

score 1 · Accepted Answer · answered Jul 13 '10 at 15:30

The simple answer is to add this CSS:

body { font-family: Arial, Helvetica, sans-serif; }

That tells the browser to first look for Arial, then if that's not available use Helvetica (a MAC font that looks like Arial), and then if that's still not available to use a sans-serif font, meaning a non-footed font (Times New Roman is a footed font).

There are only a few cross-browser compatible fonts available now: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

As posted earlier, the Google Font API is a good alternative as well.

score 0 · Answer 6 · answered Jul 13 '10 at 13:02

If you want a Javascript solution, try: Typeface.js I have seen a couple web designers use this (for headers and small font areas, but not full page fonts, as this js has some limitations).

Give it a look, may fit your need. However users without JS enabled will not take advantage of it.

Using font in Web

6 Answers6