User Tools

Site Tools


css:font_face

CSS - Font Face

First, grab your font in all possible formats. Font Squirrel has a generator.

Put those files somewhere relative to your CSS file. For this example, I’ll use font/ in the same folder as the CSS.

@font-face {
  font-family: 'Font Name';
  src: url('fonts/font-name.eot');
  src: url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
    url('fonts/font-name.woff') format('woff'),
    url('fonts/font-name.ttf') format('truetype'),
    url('fonts/font-name.otf') format('opentype'),
    url('fonts/font-name.svg#font-name') format('svg');
}

Then just use Font Name as your font family, just like normal:

h1 { font-family: 'Font Name'; }

Some people (including Font Squirrel) use the local declaration and a 2-byte unicode character (popularly: a smiley face) instead of that second .eot line, to fix some rather uninteresting IE quirkiness.

Basically, this line:

src: url('fonts/font-name.eot?#iefix') format('embedded-opentype'),

becomes this:

src: local('☺'),
css/font_face.txt · Last modified: 2020/07/15 10:30 by 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki