CODEWITHSUNDEEP
cssfont-face
gussy81
gussy81

Reputation: 19

@font-face not working for me

Having trouble getting the @font-face feature to work in my css

using the following code:

@font-face {
    font-family: bigCaslon;
    src: url(http://www.mywebsite.com/web/wp-content/font/BigCaslon.ttf);
    font-weight:400;
}

and then setting the font to this in the same css:

font-family: 'bigCaslon';

Any help would be much appreciated.

ok so i changed the code to the following:

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

font-family: 'MyWebFont';

but still no luck. i created the other font formats also

Upvotes: 0

Views: 105

Answers (2)

gussy81
gussy81

Reputation: 19

ok so adam finally got me there in the end and this was my solution

i put the fonts all in a folder called fonts in the main directory of my ftp and used the following syntax in my master css file:

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

and then i referenced the font:

font-family: 'MyWebFont';

thanks everybody for getting me going in the right direct and respect to Adam!!

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55613

You can't just use a single ttf and expect it to work. Most browsers use woff font files to render custom fonts. Additionally, for complete browser support you need to use the BulletProof @font-face syntax:

@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 */
    }

You can generate eot,woff, and svg files from a ttf or otf file using FontSquirrel's Generator

EDIT TO ANSWER COMMENT

The font files don't have to be in the same directory, as long as the path is correct. For example, my directory structure usually looks like this:

assets/
    css/
       style.css
    fonts/
       family/
           family.ttf
           family.svg
           family.woff
           family.eot

and in that case the path to my font in my CSS would look like this:

url('../fonts/family/family.eot')

Upvotes: 1

Related Questions