font-face directory

0
votes

I'm trying to add a custom font to my wordpress website, but i'm not sure of what I'm doing here so if you can help me !

For the moment in my theme directory I have a font directory in which I've put my font.otf My style.css is in the theme directory :

Theme

------style.css

------font

----------Museo300-Regular.otf

I'm using the compass to generate font face like this : 

@include font-face("Museo300", font-files("font/Museo300-Regular.otf"));

which output me this : @font-face { font-family: "Museo300"; src: url('fonts/font/Museo300-Regular.otf') format('opentype'); }

And when I try to use it : 

#headerContainer header #menu li {
  float: left;
  font-family: "Museo300";
  color: #FFF; }

But I the font doesn't get used !

So if someone know where I'm wront ! Thanks

2
wordpresscssfont-face

2 Answers

1
votes

You need to do it like this, depending on your server setup. Also, never used font-files before, or compass. I use src but I'm guessing its your server path. I.e. It thinks your font is elsewhere. 

@include font-face("Museo300", src("../font/Museo300-Regular.otf"));

or 

@font-face {
   font-family: 'Museo300';
   src: url('../font/Museo-Regular.otf');
   font-weight: normal;
   font-style: normal;
}
0
votes

Your path is wrong - it is simply a case of correctly showing the "path" to the directory.

This is what to do: in your fonts directory I would put a new file fonts.css

Then in your style.css put a CSS @import (font/fonts.css) statement

to include that file. It helps keep things tidy and you can move your font file between sites easily Font Squirrel generator for your custom fonts like this - free site and very useful making the CSS !