CODEWITHSUNDEEP
cssfont-face
rayashi
rayashi

Reputation: 1851

@font-face doesn't work

I downloaded a font inlove-light-wf.ttf, in order to use the rule @font-face.

I have in my folder: home.html and inlove-light-wf.ttf.

In my CSS I have :

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.ttf');
    font-weight: normal;
    font-style: normal;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

But it doesn't work.

Upvotes: 12

Views: 50683

Answers (3)

cmitja
cmitja

Reputation: 11

I had problems with font too. When font was working in IE wasn't on iPhone and when was working on iPhone wasn't in IE. Here is my code (i don't know why it works this way, but it does for me):

@font-face{
	font-family:"Royal Chicken";
	src: url(../gradivo/font/RoyaChicken.eot);
        src: url(../gradivo/font/RoyalChicken.ttf)  format("truetype"), /* Safari, Android, iOS */
	     url(../gradivo/font/RoyalChicken.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */
             url(../gradivo/font/RoyalChicken.woff) format("woff"), /* Pretty Modern Browsers */
             url(../gradivo/font/RoyalChicken.svg#RoyalChicken) format("svg");
}
@font-face{
	font-family:"Royal Chicken";
	src: url(../gradivo/font/RoyaChicken.eot);
}
@font-face{
	font-family:"Royal Chicken";
        src: url(../gradivo/font/RoyalChicken.ttf)  format("truetype");
}

It may help you. :)

Upvotes: 1

Matej Píša
Matej Píša

Reputation: 11

The @font-face rule usually doesn't support some old browsers. I usually use font-face generator which will generate css file from your font that you need to include, and all browsers will show it correctly.

Upvotes: 1

Alexander Schimpf
Alexander Schimpf

Reputation: 2392

One source of the problem could be if your css is in a separate file that isn't in the root folder. For example, if you keep all of your css files in a 'css' folder, you'll need to modify the font url to be relative to that file, not to the root folder. In this example it would be src: url('../inlove-light-wf.ttf');

Furthermore, not all browsers can use .ttf font files. You have to declare alternative font formats in the @font-face css.

Here's a modified @font-face declaration to get you started. I would also recommend reading more here and here.

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

Upvotes: 24

Related Questions