CODEWITHSUNDEEP
csswordpressazurefonts
Liam
Liam

Reputation: 11

Fonts on wordpress

I am trying to get a custom font to work on my WordPress site which is using an already-built theme (hosted by azure). The theme has no option built-in to change/add a font. The font that I am using works on another website. The file format is .oft . I have disabled caching server side. I am able to change the font to different websafe fonts. I have tested accessing the site from different computers and browsers with stored pages disabled.

"Failed" means that I have preset all font to 'sans-serif' and when I try any of these method it overrides this back up and uses the browsers default instead.

I think this means there isn't any random !important in the css that im not aware of.

Here is what i have tried so far.

at the top of my css file:

@font-face{
 font-family:'FontName';    
 src:url('http://example.com/font.otf') format("opentype");/* tryed with an without format type*/
}

at the bottom of my css file:

  body{
        font-family: FontName;
    }
  1. I have tried converted the file type to the 5 most popular formats and tried separately and together.
  2. I have tried accessing the font from a different external server.
  3. I have tried using @import to take the css from the working website to mine and use the created font-family to change the type.
  4. I have tried accessing different custom font (including google fonts). this also failed.
  5. I have tried 3 separate plugin for WordPress (including "use any font"(which has worked on other projects)) and they all failed.

After all these attempts I am not even sure where to continue looking for the fault. Any ideas even on general direction would be useful.

Upvotes: 1

Views: 184

Answers (3)

Vishal Gupta
Vishal Gupta

Reputation: 903

Upload You font inside the theme/fonts folder. I'm assuming that you have created fonts folder inside theme folder and upload the font file inside the fonts folder.

That time your code should be:

@font-face{
 font-family:'FontName';    
 src:url('fonts/font.otf') format("opentype");
}

Upvotes: 1

evilSnobu
evilSnobu

Reputation: 26314

You're probably missing the MIME types in web.config (they're not in by default in App Service or vanilla IIS):

<?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <staticContent>
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".otf" mimeType="font/opentype" />
      </staticContent>
    </system.webServer>
  </configuration>

Debug with F12 → Network.
You should get a 200 OK for the font file(s).
404 Not Found if you're missing the MIME type(s).

LATER EDIT:

.otf is apparently now application/font-sfnt. If MIME type is really your problem, do some more research around the right type for this one.

Upvotes: 1

Webkraft Studios
Webkraft Studios

Reputation: 552

Assuming the font file is hosted in the root directory of example.com

@font-face {
    font-family: FontName;    
    src: url('/font.otf');
}

Upvotes: 0

Related Questions