Приветствую вас уважаемые читатели. Сегодня мы поговорим о google шрифтах (google web fonts), от том как их скачивать и подключать к сайту.
Идем на сайт www.google.com/fonts/ , в фильтре справа выбираем: 1. нужную категорию, 2. при необходимости сортируем их и 3. выбираем нужный нам язык (если нужен русский шрифт в меню слева выберите Cyrillik ).
Итак мы выбрали шрифт, теперь нужно выбрать его начертания, для этого разверните панельку снизу (Open selection drawer ) и перейдите во вкладку CUSTOMIZE и выберите нужные вам начертания и языки.
Для того чтобы скачать нажмите на кнопку donwload.
Скопируйте содержащиеся в архиве шрифты в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.
Стандартное подключение скачанных шрифтов выглядит так
@font-face { font-family: "Имя_шрифта_любое"; src: url("Имя_файла_шрифта.eot"); src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype"), url("Имя_файла_шрифта.woff") format("woff"), url("Имя_файла_шрифта.ttf") format("truetype"), url("Имя_файла_шрифта.svg#DSNoteRegular") format("svg"); font-weight: normal; font-style: normal; }
В моем случае подключение будет выглядеть так
/* Код для подключения шрифта в /css/style.css */ @font-face { font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; }
Для того что бы подключить выбранный вами шрифт к сайту перейдите на вкладку EMBED , там вы увидите 2 способа подключения:
1. STANDARD
Данный код нужно добавить в секцию
вашего HTML-документа.2. @IMPORT
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");
Важно. В не зависимости от способа подключения, для определения этих семейств используйте следующие CSS правила: font-family: ‘Roboto’, sans-serif; об этом будет еще ниже.
Несмотря на новые веб-технологии и стартапы, ещё до недавнего времени мы испытывали недостаток в богатой и красивой веб-типографии .
Хотя у нас достаточно широкий выбор гарнитур, мы могли использовать только определённый набор правильных шрифтов, установленных и поддерживаемых большинством компьютеров — эти шрифты были известны как — Безопасные веб-шрифты (Web-safe fonts)
.
При создании контента на традиционных носителях (газеты, журналы, книги) в использовании типографии вас ограничивает только творческий потенциал.
Но сейчас, разделение между печатными и виртуальными носителями сокращается. Сейчас @font-face поддерживают многие современными браузеры (включая Internet Explorer с версии IE4.0 ).
Google Font Directory и Google Font API — это бесплатные веб-сервисы от Google , которые предоставляют владельцам сайтов возможность использовать различные шрифты простым, удобным и эффективным способом.
Google Font API — новый представитель ниши , который включает TypeKit , Typotheque и др.
Итак, давайте окунёмся в неисследованный потенциал Google Font API .
Вы много путешествовали по интернету, но на многих ли сайтах или блогах вы видели нестандартные шрифты?
Давайте определим нестандартные шрифты, которые не входят в число безопасных (Arial , Helvetica , Verdana , Georgia и Times New Roman ).
Google Font API — это веб-сервис, предоставляющий высококачественные открытые (open source) шрифты, которые легко могут быть использованы в вашем дизайне.
Мы надеемся, что коллекция шрифтов продолжит расти, чтобы у нас был ещё больший выбор различных гарнитур.
Если вы ещё решаете, использовать ли Google Font API , то вот некоторые из его преимуществ.
В отличие от использования изображений или замены с помощью CSS background-image , использование @font-face , как решения для более привлекательной веб-типографии, более благоприятно в плане SEO .
Кроме того, вам не нужно будет изменять существующий контент - вы только обновите свои CSS таблицы.
Поскольку вы используете HTML текст, а не изображение или фон CSS , то это не затрагивает людей, использующих программы для экранного чтения.
Так как загрузка вашего @font-face использует надёжную инфраструктуру Google , вы можете быть уверены в том, что обслуживание файлов шрифтов будет быстрым, а вы сможете снизить нагрузку на собственный сервер.
Вам не нужно быть профессиональным веб-разработчиком, чтобы использовать Google Font API . Всё, что нужно для этого сделать — это добавить один элемент stylesheet link на свою страницу, после чего, вы можете начинать использовать этот шрифт в CSS .
Вот обобщённый процесс использования Google Font API :
Для начала зайдите в коллекцию шрифтов Google , чтобы посмотреть, какие шрифты доступны для использования. Вот основной формат для включения определённого шрифта:
Если вам нужен шрифт для одноразового использования, вы можете объявить стиль одной строкой.
< p style = "font-family: "Font Name", serif" > Six Revisions Is Beautiful < / p > |
Вы, возможно, обратили внимание на то, что в предыдущих фрагментах кода мы использовали serif , как запасной шрифт. Это сделано для того, чтобы избежать любых неожиданных результатов. Это означает, что если с серверами Google что-то не так, браузер может использовать свой стандартный шрифт Serif . Сделайте это привычкой, когда используете атрибут font-family , не важно используете ли вы @font-face или нет, всегда указывайте дополнительные шрифты — эта технология называется наборами шрифтов.
Скопируйте и вставьте следующий блок кода в свой HTML документ, сохраните его, а затем откройте в своём браузере.
Мы предлагаем проверить свой HTML документ в различных браузерах, так вы сможете увидеть кроссбраузерные различия (или их отсутствие).
Вы можете поэкспериментировать с разными шрифтами, но для примера мы использовали гарнитуру Lobster .
< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href = "http://fonts.googleapis.com/css?family=Lobster" < / strong >> < strong > < / strong > < / head > < body > < h1 > Six Revisions Is Beautiful ! < / h1 > < / body > < / html > |
Скажем, вам нужно три шрифта из Google Font Directory . Не делайте множество запросов . Множественные запросы увеличивают число HTTP запросов. Меньшее количество HTTP запросов уменьшает время отклика веб-страницы.
Вместо множества тегов stylesheet link , используйте следующий формат для свойства href одного тега stylesheet link .
Пример ниже загрузит все три шрифта (Vollkorn , Yanone и Droid Sans ) с помощью одного запроса.
< strong > Vollkorn < / strong > | < strong > Yanone < / strong > | < strong > Droid + Sans < / strong > |
Теперь вы можете использовать любой из этих трёх шрифтов в своих стилях.
Отделяйте названия шрифтов с помощью | без пробелов. Обратите внимание на использование + в шрифте Droid Sans . Используйте символ + в названиях шрифтов вместо пробела.
Совет: Использование слишком большого количества шрифтов в одном запросе может увеличить время отклика страницы. Загружайте только те шрифты, которые вам действительно нужны. Будьте консервативны.
У веб-шрифтов также имеются различные параметры weight/style . Чтобы их использовать, добавьте к названию шрифта двоеточие (:), а после него укажите style и weight .
В примере ниже мы указываем bold и bold-italic для Vollkorn , и italic для Inconsolata .
http : //fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans
Используйте двоеточие (:) без пробела после названия шрифта, а затем указывайте название стиля (т.е. bolditalic) или соответствующее сокращение (т.е. bi). Если вам нужно много разновидностей одного шрифта, разделите их запятой (,) без пробелов.
Индустрия веб-дизайна активно ищет решение старой проблемы выбора и использования веб-шрифтов, и, вроде бы, @font-face является ответом.
Если начинать с истоков, тег font был введен в 1995 году, а уже в 1996-м было написано программное определение на CSS. Начиная с версии CSS 2.0 была введена загрузка и синтез шрифта в браузерах, но тем не менее тогда еще популярный, а ныне старый и неактуальный IE не имел поддержки загрузки шрифтов, что мешало бурному развитию использования шрифтов на своем сайте.
В современном интернете веб-шрифты - это давно устоявшаяся вещь. На разных сайтах мы можем использовать разного рода шрифты, которые, в свою очередь, не включены в поставку той или иной операционной системы, однако есть нежелательный побочный эффект, о котором мы сегодня и поговорим.
/* Объявляем шрифт */
@font-face {
font-family: "Имя шрифта";
src: url("путь/до/него");
}
/* Применяем шрифт */
p {
font-family: "Имя шрифта", Arial;
}
TTF или OTF - привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF - незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT - внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8, кроме TrueType кривых, поддерживаются и PostScript);
SVG - для поддержки браузера Safari.
Подготовленные к внедрению (@font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах. Вы поняли, что существуют некоторые расхождения, так же как существует не один вид операционных систем. Форматов шрифтов достаточно много, но конкретный будет работать только в конкретном браузере. Что же касается этих самых форматов, отчего их так много нужно указывать при подключении, то они нужны для кроссбраузерной поддержки сайта.
@font-face {
font-family: "Имя_шрифта_любое";
src: url("Имя_файла_шрифта.eot");
src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype"),
url("Имя_файла_шрифта.woff") format("woff"),
url("Имя_файла_шрифта.ttf") format("truetype"),
url("Имя_файла_шрифта.svg#DSNoteRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Ежели вы хотите использовать вместо файла зашифрованный код, в этом случае к нам на помощь приходит base64, который работает по тому же принципу и с изображениями, однако для старого IE base64 не обрабатывается.
@font-face { font-family: "Имя_шрифта_любое"; src: url("Имя_файла_шрифта.eot"); } @font-face { font-family: "Имя_шрифта_любое"; src: url(data:font/woff;charset=utf-8;base64,ДАННЫЕ) format("woff"), url(data:font/truetype;charset=utf-8;base64,ДАННЫЕ) format("truetype"), url("Имя_файла_шрифта.svg#Имя_файла_шрифта") format("svg"); font-weight: normal; font-style: normal; }
Src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype")
В классическом варианте мы должны были указать с вами именно так:
Src: url("Имя_файла_шрифта.eot") format("embedded-opentype")
Но при добавлении символа "?" после формата шрифта мы принудительно указываем браузеру не читать последующее указание - format("embedded-opentype"). Internet Explorer поддерживает вложение шрифтов через так называемый фирменный Embedded OpenType стандарт, начиная с версии IE 4.0. Он использует метод управления цифровыми правами для предотвращения копирования шрифтов, которые распространяются по лицензии.
1. В стародавние времена разработчики подключали изображение, которое в свою очередь было текстом, набранным в визуальном редакторе. Однако сейчас это считается дурным тоном, ибо поддержка довольна затруднительна (нужно снова открывать редактор, чтобы изменить текст картинки), соответственно пользователь не может скопировать текст с картинки.
2. Также распространенным являлось использование flash-решений.
3. Другим решением является использование Javascript, чтобы заменить текст с VML (для Internet Explorer) или SVG (для всех остальных браузеров).
Пример того, как загружается шрифт:
И все-таки, 2.7 секунды - это долгое время!
Однако, в любом эксперименте есть побочный эффект.
Изначально Bram Stein использовал кастомный шрифт, но после того, как его шрифт был подгружен, происходило «мерцание», в примере на 0.7 секунде:
Короче говоря, мерцание происходит тогда, когда браузер пытается отобразить шрифт из font-family и применить его в html. Шрифт, определенный в @font-face декларации, который не был еще загружен.
Bram Stein показал, как правильно подключать шрифты, он разработал скрипт, альтернативу от google для асинхронной подгрузки шрифтов, это скрипт - FontFaceObserver.
Честно говоря, используя больше одного шрифта на сайте можно конкретно замедлить скорость загрузки страницы сайта, тем самым увеличивая общее время загрузки. Google Fonts API позволяет быстро добавить шрифт на сайт, используя генератор шрифтов, тем самым быстрее проектировать свой сайт. Однако, нужно помнить об эффекте FOIT. Общее время загрузки - 322 мс.
Web Font Loader от Google
Web Font Loader - JavaScript библиотека для расширенной работы с API, библиотека, которая дает нам больше контроля над подгрузкой шрифта, чем стандартный API Google Fonts. Скрипт позволяет нам использовать множество шрифтов, подгружая их последовательно или асинхронно. В отличие от стандартного подключения, на слабых соединениях показывается текст со стандартным шрифтом, до тех пор, пока не будет загружен шрифт.
Общее время загрузки: 1132 мс
FontFaceObserver
FontFaceObserver - это JavaScript библиотека (5кб), так называемый подгрузчик совместимый с любым веб-обслуживанием шрифта. Скрипт позволяет уведомить нас о том, загрузился ли шрифт или нет, позволяет отслеживать событие после загрузки и до загрузки шрифта. Общее время загрузки: 159 мс
Использование скрипта.
Всем привет! О том, я писал в уроке 132, можете почитать. А в этой статье, я расскажу, как можно легко и быстро подключить шрифт к своему сайту от Google Fonts. На сервисе Google Font надо подобрать шрифт для своего сайта, а затем подключаем его.
Необязательно файл шрифта загружать на хостинг. Достаточно прописать нужный HTML код в шапку сайта, и в название нового шрифта. Шрифты можно подключать не только на сайт WordPress, но и к любому другому сайту.
Переходим на сервис Google Font по этой ссылке
, и выбираем нужный нам шрифт.
Шрифты можно подбирать через фильтр. То есть мы задаем параметры, и таким образом сервис находит шрифты с выбранными параметрами.
Можно задать и другие параметры, если нужно: thickness (толщина шрифта), slant (наклонный), width (ширина шрифта).
Также нужно выбрать кириллицу, если Ваш сайт на русском языке: cirillic (кириллица), или cirillic extended (кириллица расширенный).
Когда параметры будут выбраны, сервис покажет все шрифты, какие есть с этими.
Подводим курсор мыши к шрифту, который хотим установить на сайт, после чего появляются дополнительные настройки/параметры: Quick-use (быстрое использование), Pop out (просмотреть шрифт в отдельном окне) и Add to Collection (добавить в коллекцию).
Выбираем «Quick-use » и видим с правой стороны виджет в виде спидометра. Он показывает, с какой скоростью загружается выбранный шрифт. Чем меньше цифра на этом спидометре, тем лучше.
Еще ниже можно выбрать один из трех вариантов установки шрифта на сайт: standart, @import или javascript.
К каждому варианту есть инструкция на английском языке, как правильно подключить шрифт к сайту. Я Вам покажу первый вариант «standart », потому что он более простой.
Копируем строку выделенную красным цветом, а затем вставляем ее в файл header.php между тегами
….
Потом открываем файл стилей style.css, находим шрифт, который нужно изменить, и прописываем новый. Просто прописываем название нового шрифта. Шрифт Google Fonts помещаем в кавычки, например, font-family: "Aladin",Arial,Helvetica,Sans-serif.
Если Вы совсем ничего не поняли, о чем я тут рассказал, тогда посмотрите видео, где я подробно рассказываю, как подключить шрифт Google Font к сайту WordPress
______________________
К уроку 204. а без плагина
Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:
P { font-family: Verdana; }
Этот небольшой кусочек кода означает, что ко всем тегам
Применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.
В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:
P { font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }
При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов
Отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.
Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.
О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии .
Вышеприведенный способ использования шрифтов имеет огромный минус – вы ограничены в количестве шрифтов. Вам придется довольствоваться лишь теми их вариантами, которые, вероятнее всего, установлены на большинстве компьютеров.
Каким же образом можно увеличить выбор шрифтов, чтобы сделать дизайн страницы индивидуальным, добавить оригинальности? На помощь приходят веб-шрифты. Читайте главу дальше и вы узнаете, как с ними работать.
Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.
Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:
Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com . В строку поиска необходимо ввести название формата (например, ttf).
Если вы ориентируетесь на современные браузеры, вам достаточно будет использовать формат шрифта TTF – наиболее распространенный и используемый. В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.
Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .
@font-face { font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); }
Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:
P { font-family: MyUniqueFont; }
Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.
Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.
Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts . На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.
Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .
Первым делом на странице выбранного шрифта отобразятся варианты его начертания, а также иконка спидометра, которая означает не что иное, как скорость загрузки шрифта. Чем больше стилей для шрифта вы выбираете, тем больше времени потребуется на его загрузку. Поэтому рекомендуется выбирать только те варианты начертания, которые планируется использовать.
Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.
Первый способ подразумевает добавление в HTML-код ссылки на сервер Google, откуда и скачивается шрифт. Вам необходимо скопировать уже готовый кусок кода и поместить его между тегами
в вашем HTML-документе. Пример:...
Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);
Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .
После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:
P { font-family: "Roboto", sans-serif; }
Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:
P { font-family: "Roboto", sans-serif; font-weight: 700; }
Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).
Главными преимуществами сервиса Google Fonts является:
Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).
Сегодня нам доступно несколько вариантов подключения оригинальных и нестандартных шрифтов к веб-страницам. Каждый из этих способов имеет свои плюсы и минусы. Какой из вариантов лучше использовать, вам нужно определить самостоятельно. Зачастую это зависит от ситуации, и в разных случаях могут пригодиться разные подходы. На данном этапе вам достаточно просто знать способы использования шрифтов в CSS.
