====== CSS - Font Face ====== First, grab your font in all possible formats. [[http://www.fontsquirrel.com/fontface/generator|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('☺'),