forum.okis.ru
http://forum.okis.ru/

Подключение шрифта с помощью Google Fonts API
http://forum.okis.ru/viewtopic.php?f=10&t=1127
Страница 1 из 2

Автор:  Zorro [ 17 апр 2011, 21:49 ]
Заголовок сообщения:  Подключение шрифта с помощью Google Fonts API

Приветствую!

Расскажу вам как подключить нестандартный шрифт для использования на своём сайте.

1. Идём Google Fonts API и выбираем себе шрифт
2. Кликаем по выбранному шрифту, и жмём "Use this font", копируем код:
Код:
<link href='http://fonts.googleapis.com/css?....................

и вставляем его в поле Метатэги в Настройках сайта
Цитата:
Если испытываете трудности со вставкой этого кода в поле Метатеги - вставьте туда сначала такой код:
Код:
   <meta name="Generator" content="okis.ru">

так же запоминаем название шрифта, его можно узнать из кода ниже:
Цитата:
h1 { font-family: 'EB Garamond', arial, serif; }

3. Открываем исходный код любой страницы вашего сайта, находим строчку:
Код:
   <link rel="stylesheet" href="/shablons/***/style.css" type="text/css" media="screen" />

Открываем этот файл CSS в новой вкладке по адресу http://ваш_логин.okis.ru/shablons/***/style.css
4. Ищем в исходном коде текст, шрифт которого вы хотите изменить, например это слоган сайта:
Код:
<div id="slogan-text" class="art-logo-text">Слоган моего сайта</div>

нас интересует class="art-logo-text". Копируем название класса art-logo-text, переходим во вкладку, с открытым ранее,
http://ваш_логин.okis.ru/shablons/***/style.css жмём поиск (CTRL+F), и ищем класс art-logo-text, он может встречаться в нескольких местах, нас интересует место:
Код:
.art-logo-text, .art-logo-text a
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  color: #0E0A01 !important;
}

Копируем этот кусочек, и вставляем его в поле формы Редактировать CSS в административной панели сайта, заменяя при этом название шрифта Tahoma, Arial, Helvetica, Sans-Serif на то, которое вы получили в Google Fonts API, в данном примере это EB Garamond. Жмём кнопку Обновить, и бежим на сайт посмотреть как изменился шрифт слогана в шапке, наслаждаемся новым шрифтом, мысленно благодаря при этом Google и меня. :oops:

С чувством выполненного долга, Z.

Автор:  Zorro [ 17 апр 2011, 22:11 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Ах да, совсем забыл добавить, этот метод является кросс-браузерным - т.е. шрифт, подключенный этим методом, поддерживается всеми популярными браузерами.

Автор:  Okis [ 18 апр 2011, 00:06 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Закрепил тему.

Автор:  Ringelmann-Haus [ 02 май 2011, 21:53 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

А у меня не получаеться таким образом изменить шрифт

Видимо я совсем пока чайник! Подскажите мне пожалуйсто еще еще способы??? Более простые Очень хочеться какой-нибудь необычный старинный что-ли шрифт

мой сайт
http://www.mops-pugs.okis.ru/

Автор:  Spender [ 25 апр 2012, 09:50 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Цитата:
и вставляем его в поле Метатэги в Настройках сайта

В Метатэги этот код не вставляется, есть способ попроще?

Автор:  PhotoShopRND [ 25 апр 2012, 10:04 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Spender писал(а):
Цитата:
и вставляем его в поле Метатэги в Настройках сайта

В Метатэги этот код не вставляется, есть способ попроще?


Код:
з.ы. если у вас не получается добавить код, а система пишет, что поле предназначено только для метатегов, напишите перед кодом иконок метатег типа <meta name="copyright" content="Авторский" /> и сохраните.


И отвечая на ваш вопрос способ проще есть.

Автор:  Spender [ 25 апр 2012, 13:25 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

И каков же он, если не секрет? Я в целом про альтернативный способ,а не про этот геморрой.

Автор:  PhotoShopRND [ 25 апр 2012, 13:33 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Spender писал(а):
И каков же он, если не секрет? Я в целом про альтернативный способ,а не про этот геморрой.


Проверил, не работает пока. Как разберусь сообщу.

Автор:  Spender [ 25 апр 2012, 13:35 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Интересно, выглядит весьма просто - сейчас буду пробовать.

Автор:  PhotoShopRND [ 25 апр 2012, 14:11 ]
Заголовок сообщения:  Re: Подключение шрифта с помощью Google Fonts API

Spender писал(а):
Интересно, выглядит весьма просто - сейчас буду пробовать.


Не нужно. :) не работает, разбираюсь...

Страница 1 из 2 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/