0

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.

Ben
  • 119
  • 2
  • 4
  • 11
  • Are you linking to the font CDN or are you defining your own @font-face? – Sam Jacobs Apr 10 '15 at 14:39
  • 1
    Can you make a fiddle or snippet? Try to recreate the problem. – dowomenfart Apr 10 '15 at 14:40
  • 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 Apr 10 '15 at 14:40
  • I'm loading it in the functions file of my wordpress theme like so: function load_fonts() { wp_register_style('et-googleFonts', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700'); wp_enqueue_style( 'et-googleFonts'); } add_action('wp_print_styles', 'load_fonts');` – Ben Apr 10 '15 at 14:41
  • 2
    Also - there are versions of open sans they are purely italic... so make sure you are requesting the correct version. – ajmajmajma Apr 10 '15 at 14:42
  • I've searched my theme for italics and can't find any...I'm not even loading the italic version of the font... – Ben Apr 10 '15 at 14:44
  • Paste your code somewhere honestly. Without seeing code the possibilities of things going wrong is huge. – ajmajmajma Apr 10 '15 at 14:45
  • ok here's my css http://pastie.org/10084782 – Ben Apr 10 '15 at 14:59
  • how are you loading the font? – Sam Jacobs Apr 10 '15 at 15:08
  • I'm loading it in the functions file of my Wordpress theme – Ben Apr 10 '15 at 15:10
  • Also tried adding the font via Typekit with a plugin, get the same result - all italic... – Ben Apr 10 '15 at 15:38
  • 1
    @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 Apr 10 '15 at 16:46

1 Answers1

0

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.

Ben
  • 119
  • 2
  • 4
  • 11