Forums

@font-face issues

Permalink
Here is what I have right now:

link to typography.css in header.php: 
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('typography.css'); ?>" />


in typography.css I have: 
@font-face {
    font-family: 'Ostrich Sans Rounded';
    src: url('fonts/ostrichsansrounded-medium-webfont.eot?') format ('embeded open type'),
         url('fonts/ostrichsansrounded-medium-webfont.woff') format('woff'),
         url('fonts/ostrichsansrounded-medium-webfont.ttf') format('truetype'),
         url('fonts/ostrichsansrounded-medium-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


I'm going crazy, I've tried just about everything solution I've found in the forums and nothing is working. I've tried putting ../fonts/, I've tried putting the entire path. I've tried getThemePath instead of getStyleSheet.

If anyone can see what I'm missing I would be forever grateful.

Thanks in advance
 
AccountDisabled replied on at Permalink Best Answer Reply
Pulled a random font fromhttp://www.fontsquirrel.com/fonts/GoodDog... and the code is a bit different for the EOT files.

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


So perhaps the format('embedded-opentype') bit might do the trick.

To save a lot of time I would recommend using your TTF file to upload tohttp://www.fontsquirrel.com/tools/webfont-generator... and have Font Squirrel generate the font variants and code for you. Then try popping that on your server to see if it does the trick.

If it doesn't then I would investigate other possible issues like permissions on the font files, whether the server knows how to serve those mime types and other not so fun things to research.

If you can post a link to the site it may be easier to gather more troubleshooting ideas from helpful forum folks. ^_^
aeliza replied on at Permalink Reply
I knew I had to be missing something super obvious. It's working now. Thank you so much!!!
keeasti replied on at Permalink Reply
keeasti
Try this:

<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/typography.css">
@font-face {
    font-family: 'Ostrich Sans Rounded';
    src: url('fonts/ostrichsansrounded-medium-webfont.eot?#iefix') format ('embedded-opentype'),
         url('fonts/ostrichsansrounded-medium-webfont.woff') format('woff'),
         url('fonts/ostrichsansrounded-medium-webfont.ttf') format('truetype'),
         url('fonts/ostrichsansrounded-medium-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


Silly question, but have you uploaded your fonts to the relevant folder? Also, where is your typography.css located?