CODEWITHSUNDEEP
cssimportfont-face
Marten Zander
Marten Zander

Reputation: 2565

@font-face doesn't work even though the source is correct

I am just trying to import and make use of a font I generated on http://www.fontsquirrel.com

This is my css for embedding the font:

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

}

and this is how I try to make use of it.

html, body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'robotothin';
    font-weight: normal;
    font-style: normal;
}

and this is where I stor my fonts

enter image description here

Just don't know why it won't work. Please help me!

Upvotes: 1

Views: 134

Answers (1)

eliteware
eliteware

Reputation: 144

Use the google fonts version of that font http://www.google.com/fonts#UsePlace:use/Collection:Roboto add this to your html

<link href='http://fonts.googleapis.com/css?family=Roboto:500,900italic,900,400italic,100,700italic,300,700,500italic,100italic,300italic,400&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese' rel='stylesheet' type='text/css'>

And this to where you want to use the font

font-family: 'Roboto', sans-serif;

here's a fiddle of it in action

Upvotes: 1

Related Questions