How do I add Opan Sans .tff using CSS?

Question

I want to use the OpenSans-Light.tff webfont that I downloaded off of Google Fonts. Here is what I am trying within my main.css:

@font-face {
    font-family:"OpenSans";
    src: url("fonts/OpenSans-Light.ttf");
}

.banner h1 {
    font-family: "OpanSans", arial;
}

Though it's not working.

first, it is OPEN, not OPAN. Second, that is not the code provided by Google fonts, not even close — Devin, Sep 19 '14 at 03:31

score 1 · Accepted Answer · answered Sep 19 '14 at 03:36

If you want to use just @import use it like this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

or add this to your HTML <head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

and then add this to your CSS

.banner h1{font-family: 'Open Sans', sans-serif;}

score 0 · Answer 2 · answered Sep 19 '14 at 03:42

The easiest (and arguably best way to do it) is simply use @import in your CSS.

Here's a JSFiddle I made for you: http://jsfiddle.net/gLej4h82/

CSS:

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

body {
    font-family: 'Open Sans';
}

score 0 · Answer 3 · answered Sep 19 '14 at 03:42

If you add

to the very top of your code in your css file and reference it on the certain object like the below it should work

.banner h1{
font-family:'Open Sans', sans serif;
font-weight: 400; /* 400 is regular, 300 is light, 700 is bold */
}

score -1 · Answer 4 · answered Sep 19 '14 at 04:05

-1

Use this service to generate the font face for you its very nice service.

answered Sep 19 '14 at 04:05

4 Answers4