Embed Fonts via @font face

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

In our new Childtheme VintageFolio we used a font of Font Squirrel the first time. In this tutorial I would like to show you how to use a font of Font Squirrel for your Childtheme.

I selected for the VintageFolio Childtheme the font Bebas Neue. Before using a specific font, check out the character map, if all special signs or special characters in your language, like a currency symbol, are available. After that go to the tab @font-face kit.

Under “Choose a Subset” you can select a subset in different languages. This makes your file smaller. Or you select “Don’t Subset”, then all characters of this kit will be available. After that select TTF, EOT, WOF and SVG and download the Kit.

Unzip the ZIP file and create in the root folder of your Childtheme a folder fonts and copy the files into the new folder. That’s very important! Only then the path to your font files will be correct if you compromise the stylesheets.

Upload via FTP the files to the folder fonts. You don’t have to upload the stylesheet and demo.html.

Now open the file theme.css of your Childtheme. At the very beginning (even before the @media rule) of the stylesheets we are including the font:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../../fonts/BebasNeue-webfont.eot');
    src: url('../../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../../fonts/BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');

Please make sure you have the right paths!

Now you have to assign the elements, in our example these are all headlines:

h1, h2, h3, h4, h5, h6 {
    font-family: 'BebasNeueRegular', arial, sans-serif;
    font-weight: normal;
    font-style: normal;

At the end check the result in all popular browser.