Can anyone tell me how to unify the font I use in all browsers in different operating systems ??
+1
A:
Modern browsers support downloading fonts which can be used in any web pages - More here: https://developer.mozilla.org/en/css/@font-face
Veera
2010-07-13 09:01:39
Unfortunately 'Web' is not based on 'modern browsers' only.
rochal
2010-07-13 09:10:14
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
2010-07-13 09:45:06
@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
2010-07-13 09:55:40
@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
2010-07-13 09:56:39
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
2010-07-13 10:30:20
+1
A:
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
Jaison Justus
2010-07-13 09:50:43
I downloaded one of the kits and it worked fine almost on all browsers, but not on firefox Mac and firefox Linux ...
Naruto
2010-07-13 10:38:05
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
2010-07-13 10:54:18
i happy to know that you understand how to use font using font-squirrel service.... have a nice day
Jaison Justus
2010-07-13 11:31:32
A:
Take a look at the @font-face declaration in CSS.
There’s a good overview on A List Apart:
@font-face isn’t not 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.
Paul D. Waite
2010-07-13 10:01:38
+3
A:
There is also a similar service from Google:
For now it supports only a few fonts, but it is really simple to use.
Brunno Gomes
2010-07-13 12:59:18
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
2010-07-13 13:50:37
A:
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.
Jakub
2010-07-13 13:02:53
A:
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.
s_broderick
2010-07-13 15:30:20