CODEWITHSUNDEEP
htmlcssfontsfont-face
Krish
Krish

Reputation: 2670

@font-face working in localhost not in live server

I am using a font for my site which is stored under my project folder as fonts and i used this code in css.

my css

 @font-face
{
font-family: buddys;
src: url('/fonts/Kristen-ITC-Regular.ttf'),
     url('/fonts/Kristen-ITC-Regular.eot'); /* IE9 */
}

its working on localhost while its uploaded to live the font style not apply on my site. How to make it work on live site.

Thanks.

Upvotes: 3

Views: 9928

Answers (4)

CodeTalk
CodeTalk

Reputation: 3667

Are you sure the actual font is uploaded to your webserver and the path is correct?

I'd suggest specifying all of the image files:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

To generate them all from the font-face file, just use a tool like this

Upvotes: 2

lijinma
lijinma

Reputation: 2942

If your css file is in the folder named: 'css' and fonts dir and css dir is in the same folder named 'assets'.

Then:I think your css code should be:

 @font-face
{
font-family: buddys;
src: url('../fonts/Kristen-ITC-Regular.ttf'),
     url('../fonts/Kristen-ITC-Regular.eot'); /* IE9 */
}

Upvotes: 1

Alan Shortis
Alan Shortis

Reputation: 1109

As you're using Visual Studio, you need to set the Build Action for each of your webfonts to 'Content' under properties. If you don't do this, your font files do not get included in the deployment package and never make it to your server.

Also, I would suggest improving your @font-face code in your CSS to include all formats (you can use font squirrel to help with this: http://www.fontsquirrel.com/fontface/generator). Also worth a read is this article on the most compatible code to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Upvotes: 3

long
long

Reputation: 4318

Your font path is absolute. Check it.

Upvotes: 1

Related Questions