CODEWITHSUNDEEP
cssfonts
vinay
vinay

Reputation: 11

Font embedding with css

I am trying to import a font using the CSS below, it works in Firefox, and IE, but not in Chrome is not supporting. Can you help me on making it work in Chrome too?

@font-face {
    font-family: "Fontin-Bold";
    src: url(fonts/Fontin-Bold.ttf);
    src: url(fonts/Fontin-Bold.eot);
}

Upvotes: 0

Views: 382

Answers (1)

Zuul
Zuul

Reputation: 16269

Different browsers have different needs, and fonts are no exception. Here's a full example:

CSS

@font-face {
    font-family: 'UbuntuBold';
    src: url('ubuntu-bold-webfont.eot');
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-bold-webfont.woff') format('woff'),
         url('ubuntu-bold-webfont.ttf') format('truetype'),
         url('ubuntu-bold-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

You are better of using a Font-Face Generator like: Font Squirrel

Additionally, you need to set an .htaccess on your fonts folder with the following types:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

EDITED:

To better explain the different font formats VS different browsers:

  • Firefox and Safari support TTF or OTF format;
  • Internet Explorer supports EOT format;
  • Firefox 3.6 supports the new WOFF (new format proposal for a web font file);
  • Google Chrome, and iPhone’s Safari allow to use SVG files in @font-face;

Upvotes: 1

Related Questions