0
votes

Today I came across a strange problem using the Google web font 'Source Sans Pro'. For some reason all the text on my site suddenly changed to italic.

This happens in Safari, Chrome and Firefox.

When I changed the font to another (e.g 'Open Sans') the italics all changed back to regular. Likewise when I just deleted the font and fell-back to the bootstrap default.

I have managed to correct it by adding 'font-weight:300;' or 700 to my body and heading tags, but if I change that to 400 I get the italics again! I'm really unsure as to why this has happened?

Font added in Wordpress functions.php like so:

// Load Google Fonts
function load_fonts() {
            wp_register_style('mat-googleFonts', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
            wp_enqueue_style( 'mat-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts');

it seems to be the 400 weight causing the issue, as when removed the font renders fine.

1
Are you linking to the font CDN or are you defining your own @font-face? - Sam Jacobs
Can you make a fiddle or snippet? Try to recreate the problem. - dowomenfart
Inhertence from another style maybe? Could you show some css? Maybe try searching the style sheet for "italic" and see where you have it. - ajmajmajma
Also - there are versions of open sans they are purely italic... so make sure you are requesting the correct version. - ajmajmajma
@Ben please don't add new information in the form of comments, put them in your question, so that people have all the information without needing to trawl a long comment thread. With that said, your CSS pastie does not show how you're loading in Source Sans Pro, which is the crucial missing piece here. - Mike 'Pomax' Kamermans

1 Answers

0
votes

So it turns out it was my computer causing the issue (MacBook Pro, Mid 2014 running OSX Yosemite). Installed the latest update and fonts are appearing as they should in all browsers.