Search code examples
cssfont-facegoogle-font-api

Google Fonts - windows


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 ?


Solution

  • 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.