Tag: font-face
Nabin Nepal (Starx) css3 font-face html5
February 27, 2013

How can I use @font-face with Gotham-Light font?

Question by Mishkat Islam

Mishkat IslamMishkat Islam

I want to show Gotham-Light on the web with css codding but I can’t code. I have two fonts named Gotham-Light.eot, Gotham-Light.ttf. Now How can I use on the browser? Please help me.

Answer by Starx

StarxStarx

Define your font like this:

@font-face{
   font-family: gotham-light;
   src: url('gotham-light.ttf') url('gotham-light.eot');
}

And use it as you would normally

#someelement {
    font-family: gotham-light;
}
Nabin Nepal (Starx) css css3 font-face
March 7, 2012

@font face only displaying in demo html

Question by indrago

indragoindrago

Ok so I downloaded a @font-face kit from fontsquirell, it works fine in the demo html file included in the download, but fails to render when I put it in any other file or sub folder.

I have checked the file structure and linked accordingly, i am still having this problem. Any suggestions on what I should do?

@font-face {
font-family: 'BreeSerifRegular';
src: url('..assets/fonts/BreeSerif-Regular-webfont.eot');
src: local("☺")
     url('..assets/fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded-    opentype'),
     url('..assets/fonts/BreeSerif-Regular-webfont.woff') format('woff'),
     url('..assets/fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
     url('..assets/fonts/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

The same format works for other fonts, dunno why its not working for this.

Answer by Starx

StarxStarx

Its the basic problem with paths

Copy the fonts you receive and into a folder at the root lets say a font.

Then point your css to read the file in a relative pattern like

@font-face {
font-family: 'BreeSerifRegular';
src: url('fonts/BreeSerif-Regular-webfont.eot');
src: local("☺")
     url('fonts/BreeSerif-Regular-webfont.eot?#iefix') format('embedded-    opentype'),
     url('fonts/BreeSerif-Regular-webfont.woff') format('woff'),
     url('fonts/BreeSerif-Regular-webfont.ttf') format('truetype'),
     url('fonts/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

UPDATE

The way you are defining relative path is wrong

Change ..assets to ../assets

...

Please fill the form - I will response as fast as I can!