My Font Face Doesn't Work

Question

I'm preaparing a simple web site. But my font-face doesn't work on Google Chrome.

Here is my page

My CSS codes:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

My web.config data

<system.webServer>
    ...
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
    </staticContent>
</system.webServer>

It works fine on Firefox but not fine on Chrome. I tried "fonts folder method" and "ttf fonts" on my project but it didn't change.

I have a suspicion about woff files but I can't change it.

How can I fix this?

Answer 1

try use that - paste this link in head section:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Answer 2

What version of chrome are you using? Seems to work fine on Version 31.0.1650.63.

body {
font-family: 'Open Sans', sans-serif;}