CODEWITHSUNDEEP
cssfont-facewebfonts
Fitzmx6
Fitzmx6

Reputation: 31

@font-face not finding fonts in folder

I am trying to get @font-face to work within a sub domain located in the folder public_html/evansopen. I have the site http://coryfitzpatrick.com/evansopen/ running. I want to put fontsquirrel files in evansopen/fonts but they wont load when I dont have them in the same location as the styles.css and index.php (The public_html/evansopen folder). It is running fine this way currently, but I like to keep my file structure clean.

I can get images to load from /evansopen/images/putting_green_footer.gif folder with no problem like this

#footer {
    background-image: url(images/putting_green_footer.gif); background-repeat: repeat;
}

Why can I not get @font-face to direct to evansopen/fonts/ like so?

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

I have researched this quite a bit. Im sorry if this is a redundant post.

Upvotes: 3

Views: 17264

Answers (1)

l2aelba
l2aelba

Reputation: 22167

Example to using fontface

Your CSS file (domain.com/path/custom-font.css)

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

Your font files have to upload in

domain.com/path/fonts/nexa_light-webfont.ttf

for example

PS : It's about where is your css file, so make a /fonts/ folder in same CSS file path.

EX: domain.com/mycss.css -> domain.com/fonts/myfont.ttf

Upvotes: 5

Related Questions