Custom Fonts Not appearing.

[gatherMarcus]

I uploaded via FTP the .eot/.ttf/.woff/.svg files and have the @font-face declared in a stylesheet which I imported to my main child theme CSS file. They appear in my browser source and I can download the ttf file by adding the src to the browser’s url bar so it appears to be linked correctly.

I added the custome MIME types to my hosting Apache & nginx Settings and added them to my root .htaccess file directly above “# BEGIN WordPress”. This was all due to reading on this site and others and I also added to my child theme functions the mime_types in a function I found here. Still no luck. At wits end. Please help.

[Atelierbram]

Obviously can’t see from here what the problem is, and don’t know your process. Sometimes targeting the right name of the font can be an issue (for the name of the font might differ from the filename). This can be avoided with using fontsquirrels webfont-generator, which generates a test stylesheet with demo-page.

[gatherMarcus]

Thank you for replying. I did spend time trying to ensure I was targeting the font correctly in the css. I read to inspect the .ttf file on my desktop to see what the “Full Name” of the font was. I tried that along with other suggestions like copy and pasting the font-family name I gave it in the @font-face. No luck. I then uploaded the specific font to my computer so that regardless if it was uploaded to my server database I could call it on the web page. While loaded onto my computer the correct name was “blackout-sunrise” but this did not work for calling the font from my server.

If you have the time you can see my process in detail on this forum: http://stackoverflow.com/questions/39176888/custom-fonts-wont-appear-ran-through-mime-functions-and-font-family-no-luck

Where I’m at now is looking into encoding the fonts into Data URIs. This has really tripped me up. Help trouble shooting this would be so greatly appreciated.

[Atelierbram]

Tried something with webfonts from the Github repo of “theleagueof”, so I hope they are the same. Slightly different syntax on the @fontface declaration; without the “local” smiley-face emoticon, but does work for me.

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

[Atelierbram]

Only thing I can think of now is deleting the fonts on your server, and uploading them again with FTP … (try different FTP client?), seems like you have tried just about everything else.

[gatherMarcus]

I haven’t tried uploading through another FTP client. I will give that a go.

Thank you

[Author]

Posts