Fonts not showing properly in IE

Posted in: Newspaper
Post count: 17

site: http://peergroupleaders.com/be-inspired/

Heading fonts are correct in all but IE – testing on IE 11.

How to correct?

Thanks,

Suzanne

Post count: 6600

Hi,

Noticed this errors when using IE: http://screencast.com/t/SyGcom03
Please try to set another font on IE to see if you still get this error, it might be due to the fact that the “Quattrocento” font it’s not supported by IE, try to do a search on this.
Also you can use .ie7 .ie8.. css classes and custom css to change the font only on IE: http://screencast.com/t/JsALv2AsGrO6
Hope this helps!

Thanks

Post count: 17

Hi Lucian,

Since the Quattrocento is a part of our brand we definitely need to use it. I don’t understand how to use it with your css example. Would you mind give me the code to put in the custom css code area so that it will show on ie?

Thank you very much.

Suzanne

Post count: 9544

FYI, Lucian, there is a Google font for this
https://www.google.com/fonts/specimen/Quattrocento

Post count: 17

Christopher,

I’m using the google font and have it selected through the theme panel. So what do mean here? Please read the string above. The google font is not showing properly in IE.

Thanks,

Suzanne

  • This reply was modified 11 years by SuzanneL.
  • This reply was modified 11 years by SuzanneL.
Post count: 9544

It should work in IE as I’m using IE right now, and I can go to the Google site and the fonts work.

So, likely you need to load them from your style.css file vs using the theme panel. Meaning get the CSS from the above link I provided, from the CSS link, grab the CSS, and put at bottom of your style.css file; edit the style.css file to change the headline or whatever to the font you want, then edit the functions file to remove calls to google fonts from there.

eg. the css file you need to copy FROM:
<link href='http://fonts.googleapis.com/css?family=Quattrocento:400,700' rel='stylesheet' type='text/css'>

Kind of advanced, but that’s how I’m loading Open Sans and it works 100% of the time because Google provides the correct font for the platform.

Ideally, the point I was making for Marius is that you should be calling the Google version of the font in the theme, and the theme should be calling that from Google. It has nothing to do with “web safe” fonts, where the specific font would not be installed on a Windows PC.

Not sure that helps. But since you use that as your corporate ID font, it might be simpler to make the custom fix to ensure it always works, as I do with Open Sans.

  • This reply was modified 11 years by simchris.
Post count: 6600

Hi,

Thanks @Christopher for pointing that.

@SuzanneL
I have also tested this and seems like it’s working for me: http://screencast.com/t/yqSfKqO7O
Please try as @Christopher suggested to change the fonts directly from the style.css file and then check if this issue is still present.
If this dose not solve it please send an e-mail at contact@tagdiv.com with your wp-admin username and password so we can check this, also please specify this issue’s details.

Thanks

Post count: 17

Okay, I’m probably missing something pretty simple here, when I try to access the style sheet or open it this is what I get:

/*
Theme Name: Newspaper Child theme
Theme URI: http://themeforest.net/user/tagDiv/portfolio
Description: Child theme made by tagDiv
Author: tagDiv
Author URI: http://themeforest.net/user/tagDiv/portfolio
Template: Newspaper
Version: 1
*/

@import url(“../Newspaper/style.css”);

/* —————————————————————————-
Your custom style…. here 🙂
*/

How do I access the complete style sheet? That would solve all of this. : – )

Thanks,

Suzanne

Post count: 9544

Ah, you’re using a child theme. I don’t use child themes due to these kinds of issues, because the css is basically a “redirect” to the main CSS, and Google ‘frowns” on CSS redirects even though WordPress loves them.

So, that might or might not be the issue. The style.css I was referring to is the “main” one in the main theme, not the child theme.

I no longer use child themes, to achieve better pagespeed, so I guess I’m out on any help for this one 🙂

Post count: 6600

Hi,

Thanks Christopher!

@SuzanneL

If you use the child theme you need to add the css here, like this: http://screencast.com/t/NBAIpyzRRA
Try to activate the main theme, then you will find the style.css in the root of the theme: http://screencast.com/t/5vUswQG54edY

Thanks

Post count: 17

Hi Guys,

Just wanted to let you know that I was able to fix it. What I had to do was completely change all font-family code on the main themes style sheet, make all the child theme settings in the theme panel the same font, and do custom css in the child theme for h1 – h6.

That’s a lot of time and work just so things so correctly in IE.

Thanks,

Suzanne

  • This reply was modified 11 years by SuzanneL.
Post count: 9544

Heh. Yeah, now you know why I don’t work with child themes any more!

I tested the font on my own site our of curiosity without using child theme and it works perfectly fine in IE. So, fyi, it’s not “the font” at issue with IE, but the child theme messing with the remote loading of the font.

So, luckily you got that sorted! 🙂

Post count: 17

You are so right. I’ve been using the child theme so that my styling won’t get messed up or lost during an update. Might need to rethink that one.

Thanks again!

Suzanne

Post count: 9544

I keep a folder with copies of the files I hack each update so I can remember them at a glance, a text file with my additions to put at bottom of functions.php and note as to which section by line number x-x to remove; and a text file with cheat sheet of the search/replace for the style.css file. Not too painful. Kind of started when I had existing read/hit counter and needed to update the module to load the existing “field” vs the one used by Newspaper for hit counting. Then it was uncommenting the author byline each time in the main post file. Then it was the custom font loading. Well, there you are. As long as I have my local “cheats” folder, I can usually open two windows with both old stuff and new version of theme and then just top to bottom change stuff in new update folder, and then upload to server and it’s like nothing changed for the stuff I modified.

And, benefit is the style redirect issue that Google doesn’t like with child themes, and much easier to deal with any custom css over-rides as well as issues with tagdiv’s in house speedbooster plugin, etc.

At least this has been my experience 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
The forum ‘Newspaper’ is closed to new topics and replies.