Imported on Oct 6, 2009
@font-face: How to embed it, and how it looks across browsers
Zoltan Hawryluk has written a detailed in-depth post on @font-face.
Not only does he go into detail on using fonts via CSS:
CSS:
-
-
@font-face {
-
font-family: 'Droid Sans';
-
src: url('/shared/fonts/DroidSans/DroidSans.eot');
-
src: local('Droid Sans'),
-
local('Droid Sans'),
-
url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
-
}
-
-
/* Bold declaration only for non-IE browsers */
-
@font-face {
-
font-family: 'Droid Sans';
-
src: local('Droid Sans Bold'),
-
local('Droid Sans-Bold'),
-
url('/shared/fonts/DroidSans/DroidSans-Bold.ttf') format('truetype');
-
font-weight: bold;
-
}
-
-
body {
-
font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
-
}
-
... but he also goes into detail on how fonts are rendered in various browsers:
He opines:
- Fonts displayed on Safari for Windows (and all browsers on the Mac) in my opinion look the nicest
- I have found that Internet Explorer does a poor job when displaying fonts converted from OpenType
- Firefox users first see the page without the embedded font until the font is loaded completely
Loading comments...