CODEWITHSUNDEEP
cssfonts
daspianist
daspianist

Reputation: 5495

Custom fonts not being loaded in CSS

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!

Upvotes: 0

Views: 101

Answers (3)

Chandresh
Chandresh

Reputation: 181

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

Swap:

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

With:

src : url('assets/fonts/FoundrySterling-Medium.otf');

Upvotes: 1

RajSharma
RajSharma

Reputation: 1971

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).

Upvotes: 1

lloan
lloan

Reputation: 1403

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");
}

Upvotes: 1

Related Questions