CODEWITHSUNDEEP
htmlcssfont-face
Mr. Lavalamp
Mr. Lavalamp

Reputation: 1888

Certain fonts not working with @font-face?

Here's what's frustrating here. I got a font pack for Sansation, and then tried to use it with @font-face. The regular version works and the "bold" version doesn't. I checked the filename and it's definitely correct. My understanding was that any font should work. Am I missing something?

@font-face
    {
        font-family: sansation_regular;
        src: url('/fonts/sansation_regular-webfont.ttf'),
            url('/fonts/sansation_regular-webfont.eot');
    }

I then, without changing the font-family in the CSS corresponding to the text element, change it to:

@font-face
    {
        font-family: sansation_regular;
        src: url('/fonts/sansation_bold-webfont.ttf'),
            url('/fonts/sansation_bold-webfont.eot');
    }

Thanks for any assistance.

Upvotes: 1

Views: 997

Answers (4)

topiman
topiman

Reputation: 511

You should probably also run the font through FontSquirel to get the full set http://www.fontsquirrel.com/tools/webfont-generator

the css it'll generate will be something like:

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

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

Also I'd avoid using full ULR refs - just check the path to your fonts folder is correct from the css file

Upvotes: 1

Stuart
Stuart

Reputation: 1168

As @DOLOisSOLO and @Mr. Lavalamp suggested, absolute paths should work.

For future reference, is your CSS file in a folder? If so then a relative path URL can be used, for example:

@font-face
{
    font-family: sansation_regular;
    src: url('../fonts/sansation_regular-webfont.ttf'),
        url('../fonts/sansation_regular-webfont.eot');
}

The dots representing one level up each time.

Upvotes: 0

Mr. Lavalamp
Mr. Lavalamp

Reputation: 1888

If using a local file directory isn't working, try an absolute path. The following solution worked:

@font-face
    {
        font-family: sansation_regular;
        src: url('http://www.siteAddress.com/fonts/sansation_bold-webfont.ttf'),
            url('http://www.siteAddress.com/fonts/sansation_bold-webfont.eot');
    }

Upvotes: 0

DOLOisSOLO
DOLOisSOLO

Reputation: 141

I've tested the Sansation with @font-face, and both the regular and bold versions seem to work when installed as system fonts. Maybe double check the paths?

Upvotes: 0

Related Questions