Вот и решил я рассказать немного об этом ресурсе и поделиться тем как подключить веб-шрифты из 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 можно записывать как через отдельные свойства:@import url(http://fonts.googleapis.com/css?family=Lobster);
</style>
* {
font-family: 'Lobster', Arial, cursive;
font-weight: 400;
}
Так и в одну строку:font-family: 'Lobster', Arial, cursive;
font-weight: 400;
}
* {
font: normal normal 400 'Lobster', Arial, cursive;
}
Проверял - фурычит и так и так :) Теперь что касается Blogger, есть небольшой нюанс.font: normal normal 400 'Lobster', Arial, cursive;
}
Как подключить веб-шрифт из Google Web Fonts к Blogger(Blogspot)
С вариантом "Standart" у меня, почему-то, ничего не получилось, с @import и JavaScript - все чудесно.Итак, тут все просто, если вы решили подключить шрифт через JavaScript, то код размещаете до строчки:
<b:skin><![CDATA[
Если через правило @import, то сразу после нее.Вот и все, красивых вам текстов.
©http://magentawave.com
P.S. Для тех кому не понятно, почему на картинке-превью вареный рак.
Во-первых - это не рак, а лобстер.
Во-вторых - да, он скорее всего уже варенный.
И в-третьих - есть такой, нынче очень модный, шрифт с одноименным названием - "Lobster"(его видно на первом скриншоте, верхний), очень он всем нравится, вот и решил я скреативить таким образом :)
Спасибо, надо попробовать.
ОтветитьУдалитьПопробуйте, потом поделитесь впечатлениями ;)
УдалитьОй,это ,наверное,Саша поле посещения моего блога решил сделать этот пост...:)))
ОтветитьУдалитьКонечно,для кириллицы выбор очень маленький,зато с латиницей-какой разбег!:)))
Я давненько для этого поста созревал :), но все как-то с духом собраться не мог. А тут как раз колдую над дизайном одного блога, да еще и у вас увидел сегодня и тут уже не выдержал - наконец "родил" :)
УдалитьКстати,в шаблоне Blogger достаточно хороший выбор шрифта,но латиница,всё же,интереснее...Ну,а я,как дама заграничная :)решила немного расслабиться и побаловаться латиницей :)))
УдалитьВ том-то и дело что те что в "Дизайнере шаблонов" шрифты, только под латиницу заточены :(, и мне кажется что с Web Fonts, быстрее шрифт загружается, хотя это может потому что тот блог еще совсем "голый", но клинические испытания покажут :)
УдалитьНо с латиницей однозначно есть где разгуляться - 616 против 46 видов... Скудно и печально. Но Лобстер на русском есть :)
Я обязательно загляну туда,Саша,спасибо за такие хорошие советы!
ОтветитьУдалитьНе забывайте о моем блоге,заглядывайте,буду рада!:)
Спасибо за статью! Полезная вещь! Я предпочитаю скачивать файл шрифтв (с сайта гугле можно скачать файл .ttf) а потом файл .ttf подключить к сайту через CSS
ОтветитьУдалитьЕсли есть где разместить, то конечно можно и качнуть, тем более что креме тех что есть на GWF есть еще интересные кириллические шрифты :) Ну а так можно и не париться, думаю Гугл-хост не менее надежен чем собственный :)
УдалитьВот 400+ шрифтов с поддержкой кириллицы и установкой как на Google Web Fonts - web-marka.com. В запасе еще до 1000, постепенно выложу.
ОтветитьУдалитьХороший сайт, будем надеяться на его дальнейшее развитие. Спасибо.
УдалитьПо варианту стандарт.
ОтветитьУдалитьНе забываем закрыть link "/" (копируя с googlefonts link без слеша), а также если подключаем кирилицу (как в моем случае со шрифтом Roboto Condensed) "&subset" заменяем на "&subset"
Спасибо. Наконец нашла толковый урок
ОтветитьУдалитьнечего не понял зачем подключать черз гугл если можно подключить с хоста?
ОтветитьУдалитьСмысл в том, что во-первых:
Удалить- что делать тем у кого нет хоста, тем же Blogger-пользователям? Могут воспользоваться.
во вторых (и самое главное):
- на Google fonts все шрифты бесплатные, с общественной лицензией, что исключает возможность каких-либо санкций. На сегодняшний день это пока еще мало важно, но тенденция говорит о том, что в дальнейшем контроль за такого рода вещами в сети будет только усиливаться.