0

I have an index.html that links to a main.css. Per one of the answers to a SO question about using custom fonts, I have loaded my custom font as such by saving the file FoundrySterling-Medium.otf in the appropriate folder, and then calling it as such:

@font-face{
    font-family: "FoundrySterling";
    src: "assets/fonts/FoundrySterling-Medium.otf",
}

later on, for the body element, I set it up as such:

body, input, select, textarea {
        color: #fff;
        font-family: 'FoundrySterling', sans-serif;
        font-size: 15pt;
        font-weight: 400;
        letter-spacing: 0.075em;
        line-height: 1.65em;
    }

However, no matter what, the font will not show, and instead the default Helvetica or Arial (depending Mac or PC) is used instead. What am I missing?

Thanks!

Community
  • 1
  • 1
daspianist
  • 5,336
  • 8
  • 50
  • 94

3 Answers3

1

This is your original code:

@font-face{
    font-family: "FoundrySterling";
    src: "assets/fonts/FoundrySterling-Medium.otf",
}

Why are you not using a semi-colon at the end? Not sure if intentional.

@font-face{
    font-family: "FoundrySterling";
    src: url("assets/fonts/FoundrySterling-Medium.otf");
}
lloan
  • 1,383
  • 8
  • 23
  • Ah! I desperately wanted this to be the case - but unfortunately it's still not showing the font that I want. – daspianist Jul 08 '15 at 04:12
  • Can you put a link to where it's happening? – lloan Jul 08 '15 at 04:13
  • 1
    Let me see what I could do and link you the website soon. – daspianist Jul 08 '15 at 04:14
  • I'd double check that it's not a 404 error. Apart from the code you provided, there are a plethora of reasons why it would not work, but the most local would be the one above, IMO, but i'd like to see where the problem is and see if it's not a 404 or a simple matter of another rule overwriting it. – lloan Jul 08 '15 at 04:14
  • You called it - it was a mis-attribution of my fonts folder inside assets. Thanks for the follow up! – daspianist Jul 08 '15 at 04:17
  • Woot! Glad that was fixed. Cheers! – lloan Jul 08 '15 at 04:18
1

try changiing 

src: "assets/fonts/FoundrySterling-Medium.otf",

to

src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/

I hope it would help you.

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

RajSharma
  • 1,941
  • 3
  • 21
  • 34
1

Change your code to use the url(...) syntax:

Swap:

src: "assets/fonts/FoundrySterling-Medium.otf"

With:

src : url('assets/fonts/FoundrySterling-Medium.otf');
Chandresh
  • 181
  • 8