path from drupal theme css to font files

Question

I'm trying to include my own font to my drupal website. I've got a custom.css file in my theme inside 'sites/all/themes/mytheme/css' folder. My fonts are in my 'sites/all/themes/mytheme/fonts' folder. The css is called from the template.php in my theme folder. This is my css code right now:

@font-face {
    font-family: 'slashbadass_black';
    src: url('../fonts/Myfont.eot');
    src: url('../fonts/Myfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Myfont.woff2') format('woff2'),
         url('../fonts/Myfont.woff') format('woff'),
         url('../fonts/Myfont.ttf') format('truetype'),
         url('../fonts/Myfont.svg#slashbadass_black') format('svg');
    font-weight: normal;
    font-style: normal;
}

So is this path OK? For what I've seen the font-family is not available right now.

ssphinx ssphinx · Accepted Answer · 2015-10-21T23:51:08

As you said above, the paths are correct. 'sites/all/themes/mytheme/css/styles.css' will search the font files under 'sites/all/themes/mytheme/fonts/'.

Dumb question: Are you properly setting the html tags where the font will be used on your css? Like body { font-family: 'slashbadass_black'; }

Check the server response (network tab) with firebug (FireFox) or the developer toolbar (Chrome) (F12 shortcut) to ensure if the fonts are delivered by the server. I.e:

GET css?family=Open+Sans 200 OK 127.0.0.1 473 B 
127.0.0.1:80

If you're still in trouble, consider using the module https://www.drupal.org/project/fontyourface

path from drupal theme css to font files

1 Answers