CODEWITHSUNDEEP
cssfonts
rubik
rubik

Reputation: 9104

Font is not getting loaded

I have four @font-face rules like this in my css:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/Ubuntu-Regular.ttf) format('truetype');
}

And the file structure is as follow:

/index.html
 css/
     ...
     fonts.css
     fonts/
           Ubuntu-Regular.ttf

When using the browser, I can reach the url css/fonts/Ubuntu-Regular.ttf and the file is getting downloaded. However, the font it is not loaded by the css. Am I misusing url()?

Upvotes: 1

Views: 554

Answers (3)

Sudipa Sengupta
Sudipa Sengupta

Reputation: 405

You can try this. Just pest below code in your html head tag

http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css'>

& add below element in your css particular class

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

As because Ubuntu is google font you don't need to use font face. You can directly use this font from http://www.google.com/fonts/ -- this site

Upvotes: 1

ralph.m
ralph.m

Reputation: 14365

You need various versions of the font for it to work in all browsers. You can get all the font files you need, along with the CSS, at the FontSquirrel site:

http://www.fontsquirrel.com/fonts/ubuntu

Just click the "Webfont Kit" link in the menu.

The supplied CSS code looks like this:

@font-face {
    font-family: 'UbuntuRegular';
    src: url('Ubuntu-R-webfont.eot');
    src: url('Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
         url('Ubuntu-R-webfont.woff') format('woff'),
         url('Ubuntu-R-webfont.ttf') format('truetype'),
         url('Ubuntu-R-webfont.svg#UbuntuRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 3

mehdi
mehdi

Reputation: 1755

use all font files .eot , .woff , .ttf for all browsers..

@font-face {    
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src:url('fonts/Ubuntu.eot') format('eot'), 
          url('fonts/Ubuntu.woff') format('woff'),
          url('fonts/Ubuntu.ttf') format('truetype'); 
}

Upvotes: 0

Related Questions