Google Fonts - windows

Question

Is there some known bugs of using Google Font on Windows?

<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,500' rel='stylesheet' type='text/css'>


/* RALEWAY */
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url(http://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

Font Raleway does not show on any browser, only works on Chrome.

CSS:

.s11-col-title span{font-weight:300;font-family:"Raleway";font-size:42px;letter-spacing: -2px;}

Maybe FireFox and IE doesn't support woff2 ?

Did you try actually calling on an HTML element via CSS? – ZombieCode Sep 03 '14 at 00:39 — ZombieCode, Sep 03 '14 at 00:39

ZombieCode · Accepted Answer · 2014-09-03T01:23:10.257

2

Without knowing more of what you attempted, I would read up on how to actually implement this. Here is the link to the Mozilla Developer Network.

Mozilla Font Face

The main thing is, you need to add it to an HTML element.

HTML Element:

<h2>New Font is Used</h2>

CSS call:

h2 { font-family: Raleway; }

Update:

Your font face call is incorrect.

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway Medium'), local('Raleway-Medium'), url(http://fonts.gstatic.com/s/raleway/v9/CcKI4k9un7TZVWzRVT-T8xsxEYwM7FgeyaSgU71cLG0.woff) format('woff');

}

Here is an example: Code Pen

Update 2:

Here is what the link call should look like

<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,700,500" rel="stylesheet" type="text/css" />

Here is another example: Code Pen Example #2

Remove your hand pasted call and just use google's code. Do not use your code, it's wrong.

edited Sep 03 '14 at 01:23

answered Sep 03 '14 at 00:44

ZombieCode

1,646
2
24
46

You have the link to the CSS from google (this is correct). Then you are overwriting it with your own `@font-face` call. That `@font-face` call is incorrect. You copied it wrong. – ZombieCode Sep 03 '14 at 01:05
I just copy and paste it. – Wordica Sep 03 '14 at 01:09
Compare the two. They are not the same. Try the one I pasted and see if it works. – ZombieCode Sep 03 '14 at 01:10
Yes, yours work, but copied from google doesn't. I try many times and it just doesn't – Wordica Sep 03 '14 at 01:11
Ok now it works. I have different link on Mac OS and different on Windows on virtual machine - very strange. – Wordica Sep 03 '14 at 01:19

Michael Moriarty · Answer 2 · 2016-01-29T23:57:22.437

I question why you even need @font-face in the first place. Google fonts does that for you. You just need the link in the head of your document and then use the font name in your class declaration:

<!DOCTYPE html>
  <html>
    <head>
      <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,500' rel='stylesheet' type='text/css'>
    ...

and then in your stylesheet:

.s11-col-title span {
    font-weight:300;
    font-family:"Raleway";
    font-size:42px;
    letter-spacing: -2px;
}

and you should be good to go...

Google Fonts - windows

2 Answers2