Css – Custom font not showing up on website

cssfont-facefonts

So, I am trying to use the Overseer on a website of mine, but it won't show up for anyone who does not have that font installed on their pc. I use @font face and 5 different versions of that font (otf, eot, woff, ttf, and svg) and it still won't load. Any way I can fix this? Here is the @font-face css.

@font-face {
font-family: Overseer;
src: url(fonts/overseer.eot);
src: url(fonts/overseer.eot) format('embedded-opentype'), url(fonts/overseer.woff) format('woff'), url(fonts/overseer.ttf) format('truetype'), url(fonts/overseer.svg) format('svg');
font-weight: 400;
font-style: normal;}

Best Answer

Try this! A few minor changes that may help.

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

It works for me. Making a font work can sometimes be difficult. If it works, accept it.

Related Topic