Clever Geek Handbook

CSS: @ font-face import doesn't work

I don't understand how to get this to work, any help would be appreciated;

I'm going away from what I got from this site: http://alistapart.com/article/cssatten

from my style .css

@font-face {
 font-family: "JSL";
 src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}

font {
 color: #000000;
 font-size: 120%;
 font-family: "JSL";
}
+3


source to share


5 answers


None of the positive signs of a problem (tested with my renamed fonts) and you don't need to import a separate css file at the top of your main css file.

However, you may want more versions of the font than just the true type. Have a look at Bulletproof @ font-face Syntax .

You can use the FontSquirrels generator to achieve this.



Here's an example of an insert @font-face

in my application, pinned to the top of my main CSS stylesheet.

@font-face {
    font-family: 'JustVector';
    src: url('../fonts/justvectorv2+webfont.eot');
    src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
        url('../fonts/justvectorv2+webfont.woff') format('woff'),
        url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
        url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
    font-weight: normal;
    font-style: normal;
}
+3


source


not

not

@font-face

Try inport it:



@import_your_new_cssfile.css

where did you put:

font-face {
 font-family: "JSL";
 src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}

font {
 color: #000000;
 font-size: 120%;
 font-family: "JSL";
}
0


source


Is the "+" sign in the font URL the problem? You may want to url-encode it.

Edit - after clicking on the font url, it looks like you should try downloading the ttf file and linking to it locally, not a remote source. This prompts me to Captcha to download the file, which is probably why it doesn't work.

0


source


You need to download the file and access it locally, the Maintained Link is a download link and requires a Captcha download, which means it is NOT a direct link to the TTF file.

0


source


Depending on the font, you may need:

@font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'), 
     url('path/to/font/someFont.woff'), format('woff'), 
     url('path/to/font/someFont.ttf'), format('truetype'), 
     url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}

and in CSS:

BODY 
{
    font-family: 'someFont', Fallback, sans-serif;
    font-size: 12px;
    ... 
}

This worked for me when I had problems embedding a custom font.

0


source






More articles:


All Articles