Custom font not showing up on website

0
votes

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;}
3
cssfontsfont-face
You should add soe code or even a link to your website to let us help you. Read this - vanntile
The site has been switched due to the current font not loading, but once we get the font working the site will be switched back. - Nick Greiner
Then add a fiddle. Or a plunker. Or some code right here. - vanntile
Of what? Tell me what you need and I will put it in. - Nick Greiner

3 Answers

2
votes

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.

0
votes

I had the same issues with my website. All I did was add a "/" in front of the resource I was trying to point to to represent the root and it worked.

@font-face {
    src: url(/assets/fonts/roboto/Roboto-Regular.ttf;
    font-family: Roboto;
}
0
votes

This is the best solution i always do

https://transfonter.org/

Just upload font convert it to some format with base64 you will receive a zip inside which there is a css with font face inside it copy that long text (it is really long ) with complete font-face element and see the magic

No need for any font extension files it works everywhere