Шрифты для сайта php

Шрифты для сайта

Разрабатывая дизайн современного сайта, профессиональные WEB-дизайнеры используют уникальные красивые шрифты. Если на страницах мало текста, написанного уникальными шрифтами, то можно их оформить в виде картинок. Если текста на страницах Вашего сайта достаточно много, то для того, чтобы этот текст индексировался поисковыми системами и контент сайта загружался быстро, шрифты можно загружать в браузер, указав это в каскадной таблице стилей CSS:

Шрифты загружаются из указанной папки на Вашем или стороннем сервере и дальше отображаются браузером. Если вдруг у пользователя будет очень старый браузер, который не поддерживает этот шрифт, рекомендуется указать через запятую альтернативный встроенный шрифт, в нашем случае это шрифт sans-serif.

Чтобы загруженный шрифт кэшировался браузером, прочитайте про кеширование c помощью htaccess.

Где взять шрифты?

Большая подборка шрифтов, которые можно скачать, расположена на сайте XFont. Обратите внимание, для загрузки шрифтов в браузер, шрифты должны быть в формате TrueType(ttf).

Для работы со шрифтами с помощью встроенной библиотеки GD в PHP Вам понадобиться их конвертировать в GD(.gdf) формат. Подробнее об этом рассказано в PHP примере создание кнопки с текстом.

Скачать программу преобразования шрифтов TTF в GDF можно здесь.

Как установить шрифты в Windows 7

Чтобы установить новый шрифт, достаточно просто щелкнуть по файлу ttf правой клавишей мыши и выбрать пункт «Install» (Установить)

Альтернативный способ установки шрифтов заключается в том, что вам необходимо открыть панель управления шрифтами (Control Panel\All Control Panel Items\Fonts) и простым перетягиванием (Drag&Drop) перетянуть файл шрифта в это окно.

Если новых шрифтов много, а места на системном диске мало, можно установить шрифты при помощи ярлыков. Для этого в панели управления шрифтами слева нажмите на пункт «Font Settings» (Параметры шрифта) и в появившемся окне отметьте галочкой опцию «Allow fonts to be installed using a shortcut (advanced)» (Разрешить установку шрифтов с помощью ярлыков). В этом случае Windows будет использовать новый шрифт прямо из того каталога, в котором он находится, например с сетевого диска. Естественно, что этот диск всегда должен быть доступен. Теперь, если щелкнуть правой кнопкой по шрифту, появится дополнительный пункт меню «Install as shortcut» (Установить как ярлык).

Источник

Нестандартные шрифты: как подключить и оптимизировать

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.

Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Выбираем формат шрифта

Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.

Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.

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

Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.

Подключение шрифтов с помощью правила @font-face

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

Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.

Базовый вариант правила:

Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.

Оптимизация

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

FOIT, FOUT и FOFT

Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.

FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.

FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.

FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.

Свойство font-display

У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:

auto — поведение по умолчанию, зависит от браузера.

block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.

swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.

fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.

optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Предзагрузка шрифтов

Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.

Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.

Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :

Уменьшение количества глифов шрифта

По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.

Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.

Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.

Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:

В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.

Полезности

HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.

Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.

Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.

Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Источник

Где брать шрифты: подборка платных и бесплатных ресурсов

Шрифтом пренебрегать нельзя. Он влияет на восприятие продукта, задаёт настроение и ритм. Шрифт должен быть эстетичным и удобочитаемым. Однако хороший шрифт вовсе необязательно стоит дорого, и даже необязательно стоит денег. Мы составили подборку ресурсов, где можно найти достойные платные и бесплатные шрифты.

Бесплатных и платных шрифтов — немереное количество. Их можно найти и с помощью гугл-запроса, и в тематической группе во «ВКонтакте», и на сайте парижской словолитни, и на компьютере соседа. Главное, что нужно сделать при поиске шрифтов — внимательно прочитать лицензию на понравившейся шрифт. Он может быть бесплатным только для личного, или для личного и коммерческого использования. Платный шрифт можно купить на год или навсегда, для установки на компьютер, встраивания в программное обеспечение (для видеоигр), использования на сайтах (с учетом того, что на компьютерах пользователей шрифт не установлен) и не только.

Вопрос: где искать шрифты и читать условия лицензий?

Есть сайты, на которых собраны библиотеки шрифтов. Если для оформления сайта столовой «Колобок» понадобилась бесплатная русская вязь, вы сможете подобрать что-нибудь подходящее, используя фильтры по категориям. На платформах-агрегаторах есть как классические и известные шрифты (Futura, Optima), так и более современные, выполненные с различным уровнем качества.

В подборке Google Fonts на данный момент 1075 семейств шрифтов. Все они бесплатные и подходят для коммерческого использования. На сайте есть удобная система фильтрации: открыв страницу конкретного шрифта, можно посмотреть его начертания, глифы, прочитать описание. Отличительной чертой Google Fonts является опция Pairings — просмотр рекомендованных сочетаний выбранного шрифта с другими. Функция особенно удобна для начинающих дизайнеров, так как в большинстве кейсов требуется сочетать несколько шрифтов (помните, что много разных шрифтов — не всегда хорошо).

В библиотеке Adobe Fonts можно бесплатно скачать неограниченное количество представленных шрифтов, если вы являетесь официальным подписчиком Creative Cloud. На сайте есть обзоры и подборки шрифтов: шрифты для дизайна UX/UI, «полужирные шрифты для заметного присутствия в соцсетях» или «искривлённые шрифты в стиле неформатного гранжа для ностальгии по 90-м».

Paratype — самый крупный магазин шрифтов в России. На сайте есть разветвлённая классификация шрифтов по назначению, параметрам начертаний и языкам, которая упрощает поиск, а также подробное описание видов лицензий. С помощью тайп-тестера можно проверить, как будет выглядеть ваш текст, набранный различными шрифтами. Представлены бесплатные и платные шрифты, цена за начертание составляет от тысячи рублей, при этом Paratype регулярно проводит распродажи.

На цифровых витринах type.today лежат шрифты с качественной кириллицей, которые соответствуют «сегодняшним» тенденциям в области типографики. Цены варьируются от двух до десяти тысяч рублей за начертание. На сайте преимущественно представлена функциональная наборная кириллица, поэтому основатели type.today запустили проект tommorow, где публикуются более яркие экспериментальные шрифтовые работы.

MyFonts — крупный англоязычный агрегатор, который предлагает более 130 тысяч начертаний, бесплатные и платные шрифты (от 10 евро), многочисленные скидки. MyFonts напоминает типичный магазин: вы найдете разделы с бестселлерами, специальными предложениями, «горячими новыми поступлениями» и премиальными коллекциями шрифтов. Также любой дизайнер может предложить MyFonts собственные шрифтовые разработки.

В данном магазине собраны классические и современные шрифты, есть большое количество мокапов с примерами использования каждого шрифта. Здесь собрано более 1600 подборок шрифтов, например, коллекция в стиле ар-деко или с гуманистической антиквой (характеризуется наклоном овалов и короткими засечками). Цены начинаются от 11 фунтов стерлингов.

Есть различные агентства и творчесĸие объединения, ĸоторые специализируются на разработĸе шрифтов. Бесплатных шрифтов у них почти не наити, потому что они не агрегируют на своих саитах уже существующие гарнитуры, а сами занимаются их разработĸои под заĸаз или для продажи. Есть большое количество студий, которые создают функциональные и экспериментальные шрифты высокого качества, поэтому стоит не поскупиться и приобрести пару шрифтов, которые сделают проект лучше. На стильных сайтах студий можно посмотреть, как шрифт выглядит в конкретной коммуникативной ситуации или в анимированном виде.

Студия Лебедева предлагает 71 шрифт, среди которых благотворительный проект «Доброшрифт» (над его созданием работала группа детей с ДЦП), экс-шрифт «Яндекса», лаконичнейший шрифт для парка «Зарядье». Практически все персональные и корпоративные лицензии на одно начертание стоят 2999 руб., студенческая лицензия позволяет пользоваться шрифтом в некоммерческих целях бесплатно.

Klim Type Foundry — новозеландская студия, которая предлагает 20 семейств стильных шрифтов по цене 50 долларов за начертание. Рекомендуем обратить внимание на шрифт Domaine Sans, который представляет собой редкое решение — контрастный латинский шрифт без засечек, необычный и живой поджанр гротеска.

Студия Good Type Foundry из Осло предлагает приобрести каждое начертание шрифта за 50 евро и целое семейство за более выгодную сумму. В их коллекции есть кириллические начертания, также шрифты разрабатываются под заказ.

Рекомендуем петербургскую студию TypeType, предлагающую в том числе бесплатные шрифты для коммерческого использования, созданные во время коллабораций дизайнеров студии и обучения студентов TypeType School. Интересно устроен сайт студии: вы можете навести курсор на любой предлагаемый шрифт и начать писать в любом месте на веб-странице.

Московская Contrast Foundry продает разработки по цене 70 долларов за начертание. У студии не очень много шрифтов для розничной продажи, в большей степени она создает шрифты под заказ (для кинотеатра «Художественный» в Москве, логотипа издания «АфишаDaily», интернет-магазина Lamoda). Contrast Foundry обладает большим количеством наград в области типографики, рекомендуем ознакомиться с их стильными разработками.

У студии Fontfabric, основанной в Софии (Болгария), богатое портфолио, есть недорогие или бесплатные шрифты. Команда Fontfabric разрабатывает шрифты для крупных компаний (Lipton, Nestle, Hyundai) и для небольших местных заказчиков, регулярно проводит семинары и мастер-классы, ведет блог, работает на разную аудиторию, поэтому ее шрифты отличаются разнообразием.

Популярной в узких кругах является лондонская студия Colophon, которая разработала в том числе 10 кириллических начертаний, и продает каждое за 60 фунтов. Наиболее известные шрифты словолитни — Apercu и Relative.

Свежие наборные шрифты можно найти у небольшой пражской студии Displaay по цене 75 евро за начертание.

Можно самостоятельно упражняться в шрифтовом дизайне : брать дукты («скелеты» букв) из письма различных алфавитов, вырезать модули (шаблоны) на бумаге и формировать из них странные, но узнаваемые буквы. Получившиеся литеры нужно перерисовать, отсканировать, обвести в векторном редакторе, исправить и затем сгенерировать шрифт.

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

В Интернете можно найти как платные, так и бесплатные шрифты. Внимательно ознакомьтесь с лицензией на выбранный шрифт перед скачиванием или покупкой.

Большое количество шрифтов собрано на сайтах агрегаторах: Google Fonts, Adobe Fonts, Paratype, type.today, MyFonts, FontShop. Можно найти интересующий вас шрифт с помощью системы фильтрации.

Аутентичные современные шрифты продаются в специальных студиях или словолитнях: «Студия Артемия Лебедева», Klim Type Foundry, Good Type Foundry, TypeType, Contrast Foundry, Fontfabric, Colophon Foundry, Displaay.

Источник

Шрифты для сайта в CSS

Вас интересуют web шрифты? Вы в нужном месте! Вы узнаете, какие шрифты применяются в интернете, и как они оформляются свойствами CSS, а так же, что такое кроссбраузерность и сервисы шрифтов.

В интернете огромное количество шрифтов, объединённых в несколько семейств. Чтобы рассмотреть их все, скорее всего, потребуется ещё один такой сайт, как мой.

Наверное поэтому, обычно мы видим на веб страницах лишь несколько образцов шрифта и вот почему.

Дело в том, что есть такое явление, как кроссбраузерность, то есть возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

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

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

И если какой либо браузер или операционная система его не поймут, то в 99% случаев, они покажут шрифт из того же семейства, что не особо испортит дизайн страницы.

Конечно, такое положение со шрифтами нельзя назвать нормальным, и оно не осталось без внимания умных ребят из команды Google.

Ими был создан сервис, или библиотека, «Google Fonts», который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

Там же покажу ещё несколько аналогичных сервисов, с которых можно будет так-же скачать шрифты и установить их на свой сайт.

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

1. Семейство sans-serif — шрифты без засечек, с прямыми чётко прописанными контурами.

а) Arial	Шрифты для сайта
б) Arial Black	Шрифты для сайта
в) Tahoma	Шрифты для сайта
г) Verdana	Шрифты для сайта
д) Lucida Sans Unicode	Шрифты для сайта
е) Trebuchet MS	Шрифты для сайта
ж) MS Sans Serif	Шрифты для сайта
з) Impact	Шрифты для сайта
е) Century Gothic	Шрифты для сайта

2. Семейство serif — шрифты с засечками.

а) Times New Roman	Шрифты для сайта
б) Georgia	Шрифты для сайта
в) Palatino Linotype	Шрифты для сайта
г) MS Serif	Шрифты для сайта
д) Sylfaen	Шрифты для сайта
е) Garamond	Шрифты для сайта
ж) Century	Шрифты для сайта

3. Семейство monospace — моноширинные шрифты.

а) Courier New	Шрифты для сайта
б) Lucida Console	Шрифты для сайта
в) Consolas	Шрифты для сайта
г) Courier New	Шрифты для сайта

а) Сomic Sans MS	Шрифты для сайта
б) Monotype Corsiva	Шрифты для сайта
в) Mistral	Шрифты для сайта

Полный список свойств и значений css для шрифтов и текста, можно посмотреть в шпаргалках, а здесь рассмотрим основные.

Сначала посмотрим, как задаются шрифты в таблицах стилей.

, если шрифты будут задаваться для заголовков или абзацев.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения небольших участков контента.

Как я уже говорил, после названия шрифта, через пробел, указывается семейство шрифта.

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

И ещё одно правило. Если название шрифта состоит из нескольких слов, то при написании в стиле, его нужно заключать в кавычки, если слово одно – без кавычек.

Попробуйте разные шрифты, и в будущем будете знать, какой из них использовать для своего сайта.

Размер и цвет шрифта

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Цвет шрифта задаётся свойством color

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег и атрибут style

Тег вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

Вот так средствами css, можно манипулировать размером шрифта. Точно так же можно задать размер во всех других единицах измерений, но мы не будем на этом останавливаться подробно.

Жирный и курсивный шрифт

1. normal — нормальный;
2. bold — полужирный;
3. bolder — жирнее родителя;
4. lighter — тоньше родителя;
5. от 100 до 900 — цифровое значение, не обладает кроссбраузерностью;

Чтобы иметь возможность выделять жирным или курсивом различные участки текста, нужно создать селекторы классов c этими свойствами, и при помощи тега вставлять их в нужные места.

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

И хотя эти свойства относится уже к тексту, а не к шрифту, я хочу всё-же их здесь показать.

Для изменения расстояния между символами применяется свойство css letter-spacing

Для изменения расстояния между словами применяется свойство word-spacing

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

Шрифты можно сжать и растянуть не только по горизонтали, но и по вертикали.

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

Расстояние между строк
Расстояние между строк
Расстояние между строк

Все свойства CSS для шрифтов и текста можно найти в Шпаргалках CSS, все свойства

А теперь, как и было обещано, познакомимся, и научимся пользоваться сервисом Google Fonts

Представляю скриншот Главной страницы сервиса.

Правда интерфейсы популярных сервисов постоянно обновляются, но только в сторону улучшения и упрощения.

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

Для того, чтоб начать пользоваться выбранным из каталога шрифтом, надо внедрить его на свой сайт.

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

Для получения кода надо щёлкнуть по красному кружочку с белым крестиком, находящемуся справа, в блоке каждого шрифта.

Внизу появится чёрная полоса Family Selected. Щёлкаем по ней — открывается окно с кодом.

По умолчанию открывается вкладка STANDART в которой дан код для внедрения через файл head вашего сайта. Например:

Копируете его и вставляете в файл head, туда, где у вас прописаны все теги

Если с этой вкладки сервиса перейти на вкладку @IMPORT, то вы получите код для файла style.css вашего сайта. Например:

Этот код вставляется в самое начало файла style.css, перед самым первым селектором.

Только @import работает дольше чем link, что увеличивает время загрузки страницы.

Выбирайте предпочтительный вариант, хотя какого либо предпочтения я не заметил. Оба варианта отлично работают.

Теперь вам остаётся только оформить нужный элемент указанием шрифта так, как я уже показывал выше. Но, на всякий случай, ещё раз

Всё, шрифт, как говориться, внедрён.

Можно посмотреть, как он отображается, хотя особо переживать по этому поводу не стоит.

Сервис выложит шрифт на сайт именно в том виде, и с тем эффектом, который Вы выбрали. На всех компьютерах, которые откроют Вашу страницу.

А теперь посмотрим, как внедряется шрифт из библиотеки Google Fonts, на сайт управляющийся CMS WordPress.

Сделать это можно прямо из панели управления (одно из неоспоримых достоинств этой CMS).

Вот в этом блоке и нужно вставить код, из вкладки STANDART.

Если же внедрять через файл стилей, то берём код из вкладки @IMPORT и вставляем в самое начало файла style.css

Обновляем файл — шрифт внедрён, и в дальнейшем — на Ваше усмотрение.

Если Вы захотите выделить данным шрифтом часть текста, или какое либо слово в статье, то этот текст или слово нужно заключить в следующий код:

Если же Вам захочется целую отдельную статью отобразить таким шрифтом, то нет проблем — заключайте всю статью в этот span или лучше div, и вся статья будет отображена этим шрифтом.

И напоследок ещё два сервиса, с которых можно взять бесплатные шрифты для сайта, аналогично вышеописанному.

fontstorage.com — Большая библиотека шрифтов на многих языках.

www.xfont.ru — Самая большая библиотека русскоязычных шрифтов.

Подробнее, как поменять шрифты в шаблоне WordPress TwentyTen, можно посмотреть в статье Редактируем тему оформления

Желаю творческих успехов.

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

Перемена

Петя всего-навсего сказал «Привет!», а Люся мысленно сыграла свадьбу и родила троих детей.

Источник