CSS: @font-face import not working

css, fonts, import, text

Solution

Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.

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

You may use FontSquirrel’s generator to achieve this.

Here is an example of a `@font-face` embed in my application, which is pinned right at 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;
}

Problem

I don't understand how to get this to work, any help would be appreciated; I'm going off of what I got from this website: 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"; } ```

Original source