Why do the Google Fonts fail to show up on my website?

Question

Our ASP.NET C# web application is used in the following environment .NET Framework 4

ASP.NET Web Forms.

IIS 7

Windows 2008

Visual Studio 2010

.NET IDE C#

HTTPS ( SSL )

Our project web designer wanted to use Google fonts called Antic Slab and Antic:

http://www.google.com/fonts#UsePlace:use/Collection:Antic

http://www.google.com/fonts#UsePlace:use/Collection:Antic+Slab

I downloaded zip files associated with Google fonts.

I extracted the ttf files for each of the fonts.

In my CSS files, I place the following font-face:

@font-face {
  font-family: 'Antic Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Antic Slab'), local('AnticSlab-Regular'), url(AnticSlab-Regular.woff)      format('woff');
 }

@font-face {
   font-family: 'Antic';
   font-style: normal;
   font-weight: 400;
   src: local('Antic'), local('Antic-Regular'), url(Antic-Regular.woff) format('woff');
}

However, I use the fonts in the following css specifications:

h1, h2, h3, h4, h5, h6 {
    font-family: 'Antic Slab', serif;
    font-weight:bold;
    line-height:1.0em;
}

p
{

      font-family: 'Antic', sans-serif;
      font-size:1.2em;
      line-height: 1.5em;
      margin:0 0 0.5em 0;
}

However, the fonts fail to show up when I deploy the website.

Could someone please make some suggestions as to how I could ensure the fonts show up on my website?

Answer 1

Thanks @jukka-k-korpela and @Diegys

I am really new to configuring fonts for a web application.

Here's what I did.

Here are the google web pages associated with the Antic Slab and Antic google fonts:

http://www.google.com/fonts#UsePlace:use/Collection:Antic

http://www.google.com/fonts#UsePlace:use/Collection:Antic+Slab

I downloaded zip files associated with the the Antic Slab and Antic from google fonts.

I extracted the zip files, and got ttf files.

I processed the ttf files by uploading them into the font squirrel web font generator in order to get the woff files, eto files, etc.

Here is the url for the font squirrel web font generator:

http://www.fontsquirrel.com/tools/webfont-generator

Also, here are the @font-face CSS code that was placed at the top of my css file:

@font-face {
  font-family: 'Antic Slab';
  font-style: normal;
  font-weight: 400;
      src: url('/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular-    webfont.eot');
    src: url('/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular-    webfont.eot?#iefix') format('embedded-opentype'),
         local('Antic Slab'), local('AnticSlab-Regular'), url(/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular-webfont.woff) format('woff'),
         url('/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular-    webfont.ttf') format('truetype');
}

@font-face {
  font-family: 'Antic';
  font-style: normal;
  font-weight: 400;
     src: url('/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.eot');
    src: url('/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.eot?#iefix') format('embedded-opentype'),
          local('Antic'), local('Antic-Regular'), url(/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.woff) format('woff'),
         url('/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.ttf') format('truetype');

}

The fonts would properly show up in my web application.

Answer 2

Why would you download it ? You can use the version hosted by Google:

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

And after that use it where you need it:

font-family: 'Antic', sans-serif;