1

this is how I try to make font-awesome and simple line-icons into the website, but they continue to give me 404 errors to the page.

I have checked with CSS if it fits all the way. and pull it out on the page.

if I take the files away so there is no mistake but I add them again, then they come forward.

i have try its Why is @font-face throwing a 404 error on woff files?

I have looked at their CSS and they look like this:

simple-line-icons.css

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

font-awesome.css

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), 
        url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), 
        url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), 
        url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), 
        url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Here I show that I have just the files it just right place Could it perhaps have something to do with that I have https on the side ??

enter image description here

i have buy its design (Porto)

2
  • "I have checked with CSS if it fits all the way. and pull it out on the page. if I take the files away so there is no mistake but I add them again, then they come forward." can you explain what you mean with these sentences?
    – Tom Groot
    Oct 15, 2015 at 16:38
  • @TomGroot If I grab the css file from the area, so it seems not, but I delete CSS file. so there will be no errors appear on the page. If you do not understand me so far away to the back. Oct 15, 2015 at 16:39

1 Answer 1

3

I've had similar issues, and just playing around with the order of the URLs seemed to sort things out. Give this a try for your first font, and if that works, you then have a basis for Font Awesome. Though I generally prefer to use CDN's where possible:

@font-face {
    font-family: 'Simple-Line-Icons';
    src: url('../fonts/Simple-Line-Icons.eot');
    src: url('../fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg'),
         url('../fonts/Simple-Line-Icons.woff') format('woff'),
         url('../fonts/Simple-Line-Icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
1
  • 1
    I chose to run both of them at cdn. and thank you to tell cdn, the one I had not thought of. Oct 15, 2015 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.