Implementing @font-face

by Mohamad Agus Sya’ban

Upload
aban-nesta
Category

Technology
view
2.818
download
3

TAGS:

Embed Size (px):

description

Fine typography has always been one of the stumbling points of web design. Limited at most to a handful of cross-platform specific fonts, web designers have often found it necessary to hack their way into typographically nuanced territory. Technologies such as sIFR and Cufon utilize Flash and Javascript techniques to achieve typographic variety, but often at the expense of clumsy technological implementation. @font-face brings with it the hope of a standard, cross-platform, cross-browser, lightweight method for referencing font-files not found on end users' computer. In other words: it allows web designers to store fonts on their server and reference them in CSS, regardless of what fonts the user browsing the page has installed.

Transcript of Implementing @font-face

by Mohamad Agus Sya’ban

@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users' computer.

• Rely on native browser rendering, the same as with web safe fonts

• Lightweight• Cufon/sIFR can be a little buggy• It’s like taking a candy from a baby :p• Print stylesheet work with @font-face

CSS2 introduced @font-face.

CSS2.1 killed it.

CSS3 is reintroducing it.

Why do you need to know the history? Because, it means there is actually a feature of CSS3 that internet explorer supports, albeit, differently than all other supporting browsers.

Here is the @font-face browser:

• Internet Explorer (all versions): EOT• Safari (3.2+): TTF / OTF • iPhone (3.1) SVG • Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010) • Firefox (3.5+): TTF/OTF (.WOFF added 3.6)

• Opera (10+) TTF/OTF

Did I mention it before that using @font-face is easy?

Well, you simply include a rule in your style sheet, and reference to the font files

<a-remote-font-name> Specifies a font name that will be used as font face value for font properties.

<source> URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name").

@font-face { font-family: <a-remote-font-name>; src: <source>;

}

Then, if you want the font to appear in the H1, for example,use:

@font-face { font-family: MyriadPro; src: url('/MyriadPro.eot'); src: local(Myriad Pro'), url('/MyriadPro') format('opentype'),

url(‘/MyriadPro') format('svg')

}

h1 { font-family: MyriadPro, Arial, Verdana, Serif;

}

Note:The above example uses some fall-back options in case @font-faceisn't supported.

http://177designs.com/

http://jigowatt.co.uk/

http://speaktheweb.org/

http://forabeautifulweb.com/

The only thing that matters now is

we need font-kit to implement @font-face.

There are a lot of online generators

e.g.

http://www.fontsquirrel.com/fontface/generator

Or you can grab some free kits here:

http://www.fontsquirrel.com/fontface

Fonts must have a Web-font licence! Check the Web site you are downloading or purchasing the font from, or the documentation that comes with the font.