Forums

@font-face in custom Slate not working

Permalink 1 user found helpful
I'm having trouble getting an @font-face font working with C5, using the Slate theme. I see other people have had trouble w/@font-face in C5, and mostly solved it, but I'm still stumped. I'm just getting started with C5.

The @font-face css and fonts (from youworkforthem.com) are in:

_/themes/my-custom-slate/fonts/
dharma-gothic-e-regular.css
dharma-gothic-e-regular.eot
dharma-gothic-e-regular.svg
dharma-gothic-e-regular.ttf
dharma-gothic-e-regular.woff

The @font-face declaration is in _/themes/my-custom-slate/fonts/dharma-gothic-e-regular.css :

@font-face {
   font-family: 'Dharma Gothic E Regular';
   ... }


Links to the @font-face css and my-custom-slate stylesheet are in _/themes/my-custom-slate/elements/header.php, below the link to 'main.css' :

<link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('typography.css')?>" />
   <link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('main.css')?>" />
   <!-- INSERT webfont -->
   <link rel="stylesheet" type="text/css" href="<?php  echo $this->getStyleSheet('fonts/dharma-gothic-e-regular.css')?>" />
   <!-- INSERT custom styles -->
   <link rel="stylesheet" type="text/css" href="<?php  echo $this->getStyleSheet('zenmind.css')?>" />


Then in my custom css file, I call the @font-face font for headers:

h1,h2,h3,h4,h5,h6 { font-family: 'Dharma Gothic E Regular', Arial, Helvetica, sans-serif; color:#444; }


Firebug HTML says it's finding the custom styles and that they're overriding the default, but it's ignoring the @font-face and using the next font in line, Arial.
And Firebug Net tells me it's finding the @font-face files (see attached screen grabs).

What am I doing wrong? Can anyone help? Love the Slate theme and want to get this working ... soon. Thanks!

Laura

2 Attachments

Latrippi
 
tofraser replied on at Permalink Best Answer Reply
tofraser
One thing you should definitely check is whether you have quotes surrounding your url references in dharma-gothic-e-regular.css. From what I can see, that may be part of the problem...
Latrippi replied on at Permalink Reply
Latrippi
Yes! Thanks, tofraser. Removing the quotes from the src URLs in the @font-face css did it -- well, that and moving the fonts out of the /fonts/ directory and into the root directory. Which I don't understand why, but there you are.

Then, because I wanted things a little more organized, I moved the fonts back into /fonts/ and edited the src URLs in the @font-face css to read:

src: url(/fonts/dharma-gothic-e-regular.*)


etc. And the fonts are working fine. Thank you.