Solved

Webfont not loading only in IE11, Windows 8.1 version

Posted on 2014-02-18
2
9,494 Views
Last Modified: 2016-10-20
Hello, I have a problem with this website and I'm at a total loss:

http://www.cirworld.eu

Aside from some quirks, it's working fine on all browsers, except IE11 on W8.1.

The problem is with webfonts. They just won't load with that browser/OS combination.

The site is built with Wordpress and a theme I heavily modified.

The css for the webfonts was originally:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
font-family: 'Open Sans', sans-serif;
@import url(http://fonts.googleapis.com/css?family=Philosopher:400,400italic,700,700italic);
font-family: 'Philosopher', sans-serif;

Open in new window


at the beginning of the style.css file.

I changed this to:

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

Open in new window


I wanted to use this gabriola font I bought but I kept the name Philosopher to avoid changing too many lines of code.

Anyway, my webfont doesn't show up in IE11/W8.1.

Google fonts didn't show up either (not even in IE11/W7, actually), until I added this to the header of the theme:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Open in new window


I hope someone can help me because I don't know how I may add this web font in a way that IE11/W8.1 recognizes it too...
0
Comment
Question by:Daniele Brunengo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 

Accepted Solution

by:
Daniele Brunengo earned 0 total points
ID: 39868260
Solved it. Looks like IE11 is the ONLY browser needing the font's declared name to match the font's name as stored into the font itself, or something. Anyway, changing everything from Philosopher to Gabriola fixed it.
0
 

Expert Comment

by:Robert Beach
ID: 41852980
Thanks! This also fixed the same problem in other IE versions.
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question