using custom font in css?

Question

can someone please help, i am trying to generate a custom font in css which i have downloaded.

i have been reading up on this code which should work but i think i may be doinig it wrong.

my font is called: ShadowsIntoLight.ttf

i'm trying to make it the font family of my div social_header.

here's my code:

@font-face {
    font-family: ShadowsIntoLight;
    src: url('assets/fonts/ShadowsIntoLight.ttf');
}

social_header {
font: 100% 'ShadowsIntoLight', Arial, Helvetica, sans-serif;
font-size:12px;

}

Also double check your path. Is your /assets folder inside your '/css' directory or do you need to go up one? Use dev tools to see if your browser is reading correctly — ashley
– ashley, Commented Feb 4, 2013 at 15:19

Malkus · Accepted Answer · 2013-02-04 15:15:52Z

4

It doesn't look like you are identifying your social_header div correctly. There are a variety of ways to do this but some samples are below.

If social_header is an ID:

#social_header { ... }

If social_header is a class:

.social_header { ... }

answered Feb 4, 2013 at 15:15

Malkus

3,7262 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mirko Mukaetov · Accepted Answer · 2013-02-04 15:16:47Z

1

Input this code in head of your HTML:

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

css:

font-family: 'ShadowsIntoLight', Arial, Helvetica, sans-serif;

answered Feb 4, 2013 at 15:16

Mirko Mukaetov

2043 silver badges15 bronze badges

Comments

nat · Accepted Answer · 2013-02-04 15:47:05Z

1

first, just check the path to your ttf , than try this :

.social_header {
    font-size:  12px;
    font-family: ShadowsIntoLight, Arial, Helvetica, sans-serif ; 
}

answered Feb 4, 2013 at 15:47

nat

695 bronze badges

Collectives™ on Stack Overflow

using custom font in css?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related