Accessing remote fonts on Client’s system by @font-face

07 / Jun / 2010 by Umar 1 comments

@font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts.

We Use it

I.We choose  font and  we have right now. First of all  font format generate four another format as like(ttf, eot,otf,svg,woff)

and upload server where we access.

II. Create in css This Syntex

@font-face {
font-family: 'PalatinoRegular';
 src: url('palatino-webfont.eot');
 src: local('Palatino'), local('Palatino'),
url('palatino-webfont.woff') format('woff'),
url('palatino-webfont.ttf') format('truetype'),
 url('palatino-webfont.svg#webfontoXFrZcNP') format('svg');
font-weight: normal;
font-style: normal;

III. We acces in html page as class or Id and define body tag font-family



Specifies a font name that will be used as font face value for font properties.


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


A Font-weight value.

You can specify a font on the user’s local computer by name using the local() syntax. If that font isn’t found, other sources will be tried until one is found.
When not avaible font local machine . This time  @font- face download fonts in browser temporary download font and display text

Supported font formats

  • 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

Browser compatibility

Browser Lowest version Support of
Internet Explorer 4.0 Embedded OpenType fonts only
Firefox (Gecko) 3.5 (1.9.1) TrueType and OpenType fonts only
3.6 (1.9.2) Web Open Font Format (WOFF)
Opera 10.0 TrueType and OpenType fonts only
Safari (WebKit) 3.1 (525) TrueType and OpenType fonts only

## Umar Pahat##


comments (1 “Accessing remote fonts on Client’s system by @font-face”)

Leave a Reply

Your email address will not be published. Required fields are marked *