Почему шрифты Google не отображаются на моем сайте?

Наши ASP.NET веб-приложение C# используется в следующей среде .NET Framework 4

ASP.NET веб-формы.

IIS 7

Windows 2008

Visual Studio 2010

.NET IDE C#

HTTPS (SSL)

Наш веб-дизайнер проекта хотел использовать шрифты Google под названием Antic Slab и Антик:

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

Http://www.google.com/fonts#UsePlace:use/Collection:Antic + Плита

Я скачал zip-файлы, связанные с Google fonts.

Я извлек файлы ttf для каждого из шрифтов.

В моих CSS-файлах я помещаю следующее лицо шрифта: 

@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');
}

Однако я использую шрифты в следующих спецификациях css: 

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;
}

Однако шрифты не отображаются, когда Я разворачиваю сайт.

Не мог бы кто-нибудь сделать несколько предложений о том, как я могу гарантировать, что шрифты появятся на моем веб-сайте?

2 2
css google-font-api font-face fontfamily

2 ответа:

Спасибо @jukka-k-korpela и @Diegys

Я действительно Новичок в настройке шрифтов для веб-приложения.

Вот что я сделал.

Вот веб-страницы google, связанные с Antic Slab и шрифтами Antic google:

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

Http://www.google.com/fonts#UsePlace:use/Collection:Antic + Плита

Я скачал zip-файлы, связанные с античной плитой и Антиком из шрифты google.

Я извлек zip-файлы и получил файлы ttf.

Я обработал файлы ttf, загрузив их в генератор шрифтов Font squirrel web, чтобы получить файлы woff, eto и т. д.

Вот url-адрес для генератора шрифтов Font squirrel web:

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

Кроме того, вот CSS-код @font-face, который был помещен в верхней части моего css-файла: 

@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');

}

Шрифты будут правильно появится в моем веб-приложении.

2

Зачем вам его скачивать ? Вы можете использовать версию, размещенную в Google: 

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

И после этого используйте его там, где вам это нужно:

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