0

I am working on a site which uses a commercial wordpress theme and the redux framwork. It seems to me that web fonts have been incorrectly implemented and I just want to confirm this with a frontend specialist.

In an included css file the following is declared:

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);

Later, the font is used throughout the theme's css :

font-family: Source Sans Pro;

After some testing, it seems to me that the above only works if the end user actually has that Source Sans Pro font installed on their system. In my case I did have this installed on OSX so did not see the same font problems as an end user. By failing to provide a fallback, I've observed that in other browsers e.g. IE11 on virtualised Windows 8.1 a serif font is displayed.

Is an @font-face declaration for Source Sans Pro required after importing it? I can't find this anywhere in css loaded by the theme. Should Source Sans pro also be quoted? Would the following be more correct?

font-family: "Source Sans Pro", sans-serif;
codecowboy
  • 9,835
  • 18
  • 79
  • 134

2 Answers2

0
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);
font-family: 'Source Sans Pro', sans-serif;

Found it on google: fonts library

i just tested it, and it works just fine without the quotes and the sans-serif part. So you can be sure it works :)

Refilon
  • 3,334
  • 1
  • 27
  • 51
  • Thanks. Are single and double quotes both valid and would you expect the unquoted version not to work? – codecowboy Oct 31 '14 at 09:46
  • @codecowboy i just tested it, and it works just fine without the quotes and the sans-serif part. So you can be sure it works :) – Refilon Oct 31 '14 at 10:02
  • This is not different from the code in the question in any essential way. Just saying that it works is not an answer to a question that claims that it does not work. – Jukka K. Korpela Oct 31 '14 at 13:26
  • @JukkaK.Korpela He's asking if it works when the quotes are not there, and it does. So it actually IS an answer to the question :) – Refilon Oct 31 '14 at 13:29
0

I realised that if you follow the link http://fonts.googleapis.com/css?family=Source+Sans+Pro:600 it loads css which contains the @font-face code.

codecowboy
  • 9,835
  • 18
  • 79
  • 134