Подключение и использование интернет-шрифтов от Google

Красный(вареный) лобстер При оформлении дизайна веб-страницы, часто хочется выделить красивым и необычным шрифтом название, заголовки или ссылки в меню, для этого обычно используют картинки. Однако, есть возможность сделать это гораздо проще. Красивый и уникальный шрифт части, а может даже и всего текста, на сайте или в блоге теперь установить очень просто, благодаря использованию интернет-шрифтов. Сегодня в полной мере и без особого труда подключить веб-шрифты к своему интернет-ресурсу позволяет Google Web Fonts где представлен и предоставлен огромный выбор самых различных интернет-шрифтов, причем также имеется неплохая подборка и для русского языка - кириллицы.
  Вот и решил я рассказать немного об этом ресурсе и поделиться тем как подключить веб-шрифты из Google Web Fonts к своему сайту или блогу.
 Итак, начнем с того, что тут, как и везде, латиницей шрифтов гораздо больше и они более разнообразны чем кириллицей, однако красивые шрифты есть и для нас. Интерфейс прост и интуитивно понятен, хотя и доступен пока только на английском.
 А так выглядит главная страница Google Web Fonts:
Главная страница Google Web Fonts
  В колонке слева - "Script", в выпадающем списке, выбирается буквенный набор - латиница, кириллица, греческий и т.д. Если вам нужен веб-шрифт для русского языка, то лучше сразу выбрать кириллицу(Cirillic).
 Если вы хотите использовать только один понравившейся шрифт - кликаете на Quick-use под ним и получаете код для интеграции на сайт(об этом ниже).
  Но чтобы не добавлять для каждого шрифта отдельный код подключения, можно создать коллекцию, в которую выбрать сразу несколько веб-шрифтов - Add to Collection и получить код для сайта в одной строчке, что конечно же удобнее и лучше.
  Более подробно просмотреть выбранные шрифты, провести тест драйв и многое другое можно кликнув на "Review"(Обзор).
  Когда же окончательный выбор сделан и коллекция утверждена, кликаем на "Use"(Использовать), чтобы взять необходимый код.
 На странице получения кодов, есть индикатор влияния на загруженность веб-страницы, при подключении к сайту одного или коллекции интернет-шрифтов, на него стоит обращать внимание.
  Вторым пунктом идет выбор буквенных наборов для этого шрифта. По умолчанию всегда будет латиница, поэтому не забывайте повторно выбрать кириллицу при необходимости. Выбран должен быть хотя бы один пункт, но можно выбрать и несколько. Не забывайте про индикатор :)
  Как видно на скриншоте, возможно три способа подключения веб-шрифтов Google к сайту:
1. Стандартный - через удаленное подключение;
2. Через правило @import;
3. через JavaScript.
  Варианты 1 и 3 добавляются повыше в <head>, 2 - наверх в раздел с CSS; если стили подключены удаленно то лучше будет записать в шаблоне перед ссылкой на основной стиль так:
<style>
@import url(http://fonts.googleapis.com/css?family=Lobster);
</style>
  В CSS можно записывать как через отдельные свойства:
* {
font-family: 'Lobster', Arial, cursive;
font-weight: 400;
}
Так и в одну строку:
* {
font: normal normal 400 'Lobster', Arial, cursive;
}
 Проверял - фурычит и так и так :) Теперь что касается Blogger, есть небольшой нюанс.

Как подключить веб-шрифт из Google Web Fonts к Blogger(Blogspot)

 С вариантом "Standart" у меня, почему-то, ничего не получилось, с @import и JavaScript - все чудесно.
 Итак, тут все просто, если вы решили подключить шрифт через JavaScript, то код размещаете до строчки:
<b:skin><![CDATA[
Если через правило @import, то сразу после нее.
 Вот и все, красивых вам текстов.
©http://magentawave.com
P.S. Для тех кому не понятно, почему на картинке-превью вареный рак.
Во-первых - это не рак, а лобстер.
Во-вторых - да, он скорее всего уже варенный.
И в-третьих - есть такой, нынче очень модный, шрифт с одноименным названием - "Lobster"(его видно на первом скриншоте, верхний), очень он всем нравится, вот и решил я скреативить таким образом :)

15 комментариев:

  1. Ответы
    1. Попробуйте, потом поделитесь впечатлениями ;)

      Удалить
  2. Ой,это ,наверное,Саша поле посещения моего блога решил сделать этот пост...:)))
    Конечно,для кириллицы выбор очень маленький,зато с латиницей-какой разбег!:)))

    ОтветитьУдалить
    Ответы
    1. Я давненько для этого поста созревал :), но все как-то с духом собраться не мог. А тут как раз колдую над дизайном одного блога, да еще и у вас увидел сегодня и тут уже не выдержал - наконец "родил" :)

      Удалить
    2. Кстати,в шаблоне Blogger достаточно хороший выбор шрифта,но латиница,всё же,интереснее...Ну,а я,как дама заграничная :)решила немного расслабиться и побаловаться латиницей :)))

      Удалить
    3. В том-то и дело что те что в "Дизайнере шаблонов" шрифты, только под латиницу заточены :(, и мне кажется что с Web Fonts, быстрее шрифт загружается, хотя это может потому что тот блог еще совсем "голый", но клинические испытания покажут :)

      Но с латиницей однозначно есть где разгуляться - 616 против 46 видов... Скудно и печально. Но Лобстер на русском есть :)

      Удалить
  3. Я обязательно загляну туда,Саша,спасибо за такие хорошие советы!
    Не забывайте о моем блоге,заглядывайте,буду рада!:)

    ОтветитьУдалить
  4. Анонимный14.05.2013, 03:12

    Спасибо за статью! Полезная вещь! Я предпочитаю скачивать файл шрифтв (с сайта гугле можно скачать файл .ttf) а потом файл .ttf подключить к сайту через CSS

    ОтветитьУдалить
    Ответы
    1. Если есть где разместить, то конечно можно и качнуть, тем более что креме тех что есть на GWF есть еще интересные кириллические шрифты :) Ну а так можно и не париться, думаю Гугл-хост не менее надежен чем собственный :)

      Удалить
  5. Вот 400+ шрифтов с поддержкой кириллицы и установкой как на Google Web Fonts - web-marka.com. В запасе еще до 1000, постепенно выложу.

    ОтветитьУдалить
    Ответы
    1. Хороший сайт, будем надеяться на его дальнейшее развитие. Спасибо.

      Удалить
  6. По варианту стандарт.
    Не забываем закрыть link "/" (копируя с googlefonts link без слеша), а также если подключаем кирилицу (как в моем случае со шрифтом Roboto Condensed) "&subset" заменяем на "&subset"

    ОтветитьУдалить
  7. Спасибо. Наконец нашла толковый урок

    ОтветитьУдалить
  8. Анонимный15.02.2016, 03:29

    нечего не понял зачем подключать черз гугл если можно подключить с хоста?

    ОтветитьУдалить
    Ответы
    1. Смысл в том, что во-первых:
      - что делать тем у кого нет хоста, тем же Blogger-пользователям? Могут воспользоваться.
      во вторых (и самое главное):
      - на Google fonts все шрифты бесплатные, с общественной лицензией, что исключает возможность каких-либо санкций. На сегодняшний день это пока еще мало важно, но тенденция говорит о том, что в дальнейшем контроль за такого рода вещами в сети будет только усиливаться.

      Удалить

Следующее Предыдущее

BestProject