Подключение google fonts. Подключение шрифтов CSS
Влад Мержевич
Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.
Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.
h1 { font-family: SuperPuperFont; }
Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам
. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову - это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.
- Текст легко добавлять и править.
- В браузере можно пользоваться поиском и находить желаемые фразы.
- В настройках браузера можно уменьшать или увеличивать размер шрифта добиваясь комфортного просмотра.
- Поисковые системы хорошо индексируют содержимое документа.
- Текст можно выделить и скопировать в буфер, а также перевести на другой язык.
- Параметры текста вроде межстрочного расстояния, цвета, размера и тому подобное легко менять с помощью свойств CSS.
- К тексту опять же через CSS просто добавлять разные эффекты, например тень.
Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.
- Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
- Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.
В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.
| Формат | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Самый поддерживаемый формат - TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).
Пример 1. Подключение TTF
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Вначале загружаем сам файл шрифта с помощью правила @font-face . Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.
Результат данного примера показан на рис. 1.
Рис. 1. Заголовок с загруженным шрифтом
Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.
Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда - файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных мной сайтов оказался один, показавший текст в IE правильно.
Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.
src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);
Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.
Пример 2. Подключение EOT
HTML5 CSS3 IE Cr Op Sa Fx
Современный элемент политического процесса
По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.
Что касается iOS, то делать и загружать отдельный шрифт в формате SVG как мне кажется нет особого смысла. Аудитория сайтов просматривающая его через iOS пока невелика, к тому же версию сайта под мобильные устройства стараются облегчить, и загружать дополнительные несколько десятков килобайт не желательно.
Google Web Fonts
Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts . Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.
Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).
Рис. 2. Выбор шрифтов в Google Web Fonts
Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.
Рис. 3. Загружаемые на страницу шрифты
Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.
1. Через элемент . Строка будет иметь примерно следующий вид.
2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.
@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. Через JavaScript.
В принципе, все пути равноценны, так что выбирайте по своему предпочтению.
Преимущества применения данного сервиса такие.
- Шрифты свободны для использования, вам не нужно за них платить.
- Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
- Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.
Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.
Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.
Google Fonts – один из лучших ресурсов с бесплатыми веб-шрифтами, и Google дает вам несколько способов импортировать их на свой веб-сайт. К сожалению, ни один из них не включает популярный движок WordPress. Это означает, что вы должны или использовать плагины, которых очень много, или пачкать руки, возясь с кодом.
Хорошая новость заключается в том, что вы можете установить любой шрифт из библиотеки Google практически на любую тему WordPress без особых хлопот. Как именно – мы сегодня вас научим.
Варианта есть два – подключить плагин, или немного пошаманить с файлом functions.php.
Но сначала хотелось бы перечислить преимущества и недостатки Google Fonts, чтобы вы окончательно решили, использовать их в своих проектах или нет.
Хорошие и плохие Google Web Fonts
Что касается веб-шрифтов, то Google - один из лучших вариантов с точки зрения производительности . Все из-за легкой конструкции, и системы кэширования. Посетители не должны ждать, пока загрузятся Google-шрифты, если они недавно посетили сайт, на котором использовались они же. Популярные шрифты, такие как Open Sans, могут повысить производительность вашего сайта за счет сокращения времени загрузки.
Еще одной особенностью является то, что Google позволяет загружать эти шрифты , так что вы можете использовать их в своих макетах.
И, наконец, платформа полностью свободна . Чтобы начать использовать шрифты, нужно только авторизоваться или завести почтовый ящик на Gmail (а у кого сегодня нет почты на Gmail?).
Из недостатков можно указать то, что выбор Google-шрифтов невелик , многие из них похожи друг на друга. Нужно потратить много времени на поиски, чтобы найти приличный, оригинальный шрифт. Шрифтов для кириллицы совсем мало.
Помимо этого, есть обычные проблемы безопасности – вам нужно указать некоторые личные данные при установке шрифтов от Google на вашем сайте.
Как установить шрифты Google с помощью плагинов WordPress
Если вы поищете плагины, то первое, что увидите в результатах поиска - плагины WP Google Fonts и Easy Google Web Fonts . Это действительно два лучших плагина.
Плагины не являются идеальным решением для установки Google-шрифтов на WordPress сайте - не только с точки зрения производительности, но и потому, что плагины не позволяют выбирать определенные куски текста. Тем не менее, если вы или ваш клиент уверен, что лучше использовать плагины, то посмотрите на эти два варианта.
Этот плагин позволяет ориентироваться на конкретные элементы, такие как заголовки H1, параграфы и цитаты. Вы также получаете вариант пользовательского CSS для дальнейшей работы со стилями отдельных шрифтов. Добавить и настроить шрифты от Google на вашем WordPress сайте с помощью этого плагина довольно легко.
Easy Google Web Fonts оправдывает свое имя, и делает установку Google Fonts супер легкой даже для начинающих. Вы можете использовать функцию Live Preview для просмотра, тестирования и оптимизации шрифтов, не выходя из веб-сайта, а также создавать свои собственные правила шрифта, не написав ни строчки кода.
Правильный путь установки Google Fonts в шаблон WordPress
В конце концов, мы приходим к тому варианту, чтобы открыть файл functions.php и немного поработать с кодом. Перед тем, как сделать это, вам нужно выбрать шрифт из библиотеки Google. Ради примера, давайте попробуем взять очень популярный Open Sans .
Затем вам нужно выбрать стиль шрифта – нормальный, жирный или курсив. Это вы в состоянии сделать самостоятельно:)
После того, как вы выберете стили, Google даст вам фрагмент кода. Наш выглядит следующим образом:
Кроме того, мы получили CSS стиль:
font-family: "Open Sans", sans-serif;
Теперь пришло время, чтобы открыть файл functions.php (путь к файлу: wp-content/themes/yourtheme). В конце файла добавьте новую функцию:
function load_fonts()
{
wp_register_style("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");
Ключом этой функции является команда "wp_enqueue_style", которая заставляет WordPress вызывать таблицы стилей шрифта в заголовке каждой страницы. Если вы внимательно посмотрите, то увидите, то мы удалили ссылку href= и rel=’stylesheet’ type’text/css’, из кода, который нам дал Google, и вам нужно будет делать то же самое, если вы хотите добавить любой другой Google-шрифт для вашего сайта на WordPress.
Все, что вам нужно сделать сейчас, это открыть основной файл CSS и вставить стиль с Open Sans. Тут работают обычные правила, поэтому добавьте следующий код в таблицу стилей, сохраните и обновите:
body
{
font: normal 1em "Open Sans", sans-serif;
color: #313131;
}
Этот стиль будет работать по всему сайту. К отдельным фрагментам текста вы можете задать другой стиль:
Bold-text
{
font: bold 1em "Open Sans", sans-serif;
}
Как видите, на самом деле все очень просто. Пробуйте и проверяйте результат:)
Шрифты играют огромную роль в оформлении сайта. Один и тот же текст, написанный разными шрифтами может производить на человека прямо противоположные впечатления.
Смотрите сами:
Одни шрифты выглядят более убедительно, другие - более интригующе.
Но как подключить любые шрифты к сайту и применять их где захочется?
В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.
Вы убедитесь, что в подключении шрифтов к сайту нет ничего сложного.
Вы узнаете:
Способ №1. Быстрое подключение шрифтов к сайту на WordPress (cложность: ⭐ ⭐ ⭐)
Если на ваш сайт установлена премиальная тема оформления - вы можете подключить шрифты за 2 минуты.
Например:
Вы хотите изменить шрифт заголовков своих статей. Для этого:
1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один - "настройки темы".
2. Перейдите в раздел Typography (типография).
3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):
Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.
Способ №2. Используйте всю силу Google Fonts
(cложность: ⭐ ⭐ ⭐ ⭐)
Вы когда-нибудь слышали про Google Fonts? Если вкратце - это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.
Шаг 1. Перейдите на официальный сайта сервиса.
Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:
Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.
Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку "+":
Вы можете добавить любые шрифты нажимая на значок "+".
Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:
Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект - нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):
Но если вам нужно только жирное начертание (для заголовков), выберите только ее.
Помните, чем больше начертаний вы выберите, тем больше будет вес загружаемого файла.
Чтобы не замедлять скорость загрузки сайта выбирайте как можно меньше начертаний шрифта.
Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую "@import" и вставьте на первую строчку CSS файла вашего сайта:
Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/"вашатема"/css/... В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:
Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет 👌
Так как сначала должны загрузиться шрифты, только потом все остальное - размещайте код подключения шрифта в самое начало CSS файла.
Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.
Например:
Для придания шрифта Roboto всем абзацам я напишу следующее: p { font-family: Roboto;}
Способ №3. Кастомное подключение шрифтов с помощью CSS (cложность: ⭐ ⭐ ⭐ ⭐ ⭐)
Если вы достаточно квалифицированы, лучше всего самостоятельно подключить шрифты через CSS. В этом случае шрифты будут находится на вашем сервере в специальной папке. Но для начала нужно их где-то раздобыть.
Где взять веб-шрифты для сайта
А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?
Подключить шрифты с бесплатной лицензией. Проще всего найти их с помощью сервиса Fontsquirrel, что мы и сделаем.
Шаг 1. Перейдите на официальный сайт сервиса
Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.
Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.
Например, если есть 4 начертания, будет написано 4 Styles:
Обозначение начертаний шрифтов - нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).
Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.
Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.
Для подключения шрифтов используем @Font-face
Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.
Плюсы:
- Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
- Файлы шрифтов будут находится на вашем сервере - вы не будете зависеть от сторонних сервисов.
Минусы:
- Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
- Не зная CSS можно легко запутаться.
Вы можете просто скопировать мой готовый код и где нужно указать свои значения.
Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.
Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.
Шаг 2. Пропишите в самом начале CSS файла следующую запись:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
font-weight: normal;
font-style: normal;
}
Где MyWebFont - это название шрифта, а значение свойства src (данные в скобках в кавычках) - их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.
Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.
Шаг 3. При подключении курсивного начертания, пропишите следующее:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
font-weight: normal;
font-style: italic;
}
Где все то же самое, только свойству font-style мы придали значение italic.
Шаг 4. Для подключения жирного начертания, добавьте следующий код:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: normal;
}
Где свойству font-weight мы задали значение bold.
Не забудьте для каждого начертания указывать правильное расположение файлов шрифтов.
Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: italic;
}
Ну вот и все:) Только что вы подключили 4 начертания шрифта на свой сайт.
Но есть одна ремарка - данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.
Как подключать шрифты для сайтов на разных CMS
Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) - если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.
Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам - поделитесь ею в социальных сетях.
А также:
Подписывайтесь на мою рассылку , чтобы не пропустить полезные и интересные публикации на блоге.
Шрифт играет далеко не последнюю роль в дизайне сайта, он может подчеркнуть общий стиль, помочь пользователю сориентироваться в текстовом контенте. Искать бесплатные шрифты, а потом подключать кучу файлов для разных браузеров – дело не благодарное, но есть выход – шрифты от Google Fonts.
Поиск подходящего шрифта от Google Fonts
Давайте зайдем на сам сервис шрифтов от гугл и разберем его возможности.
В левой (боковой) панели, вы можете настроить параметры фильтрации шрифта и самое главное выбрать его принадлежность к кириллице или латинице.
В верхней части можно сменить отображение демо-текста, в виде: слова, предложения, параграфа, постера. Изменить размер шрифта и ввести свой текст вместо демо варианта.
Подключение шрифта от Google Fonts
После того, как вы выбрали нужный шрифт, жмем по кнопочке “quick-use” (см. картинку, ниже)
На странице подключения шрифта, нужно выбрать:
1. Стили шрифта, жирность, курсив и т.д. Сильно не разгоняйтесь, выбирайте только самое необходимое, т.к. все это влияет на скорость загрузки шрифта и соответственно скорость загрузки текста у вас на сайте. Следите за показателями датчика справа (пункт 5 на картинке)
2. Выбираем какие символы вам необходимы в этом шрифте (в основном латиница и кириллица).
3. Копируем код тега link в блок HEAD
4. Используем объявление шрифта в стилях как показано в пункте 4 (см.картинку)
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>
В этом уроке мы разберем как подключать веб-шрифты в верстку. Веб-шрифты — это дополнительные гарнитуры шрифтов, которые используются чтобы сделать дизайн более уникальным или разнообразным. Подключение шрифта на странице — обеспечивает его корректное отображение во всех браузерах, и не важно установлен ли он у пользователя или нет.
Как подключить шрифт из Google Fonts
Шаг 1 — выбираем шрифт
Сервис Google Fonts имеет большой набор веб шрифтов, которые можно подключить к проекту одной строкой, и сразу же использовать в CSS стилях. Чтобы выбрать для просмотра только кириллические шрифты, в фильтре слева в параметре Script необходимо выбрать значение Cyrillic (для кириллицы) или Cyrillic Extended (для расширенной кириллицы). После этого справа будут показаны шрифты поддерживающие кириллицу.
Для быстрого использования нажимаем на кнопку Quick Use.
Шаг 2 — настраиваем параметры шрифта
На следующей странице выбираем какие начертания шрифта будем использовать. У шрифта OpenSans это 10 начертания, от очень тонкого, до экстра жирного. Чем больше начертаний выбрано — тем больше это будет влиять на скорость загрузки страницы. Поэтому стоит подключать только используемые шрифты. После можно выбрать наборы символов, для кирриллицы выбираем Cyrillic Extended или Cyrillic, и Latin.
Шаг 3 — код для подключения шрифта
После берем строку кода для подключения на свой сайт. Вариант Standard — подключение стороннего css файла из html, на вкладке @import — будет строка для подключения через css файл, и третий вариант для Javascript. После этого подключение готово и можно использовать данную гарнитуру шрифта в верстке. В блоке ниже показан пример как обращаться к шрифту: font-family: "Open Sans", sans-serif;
Ширину выставляем через параметр font-weight: 300; или font-weight: 400; font-weight: 800; Курсив — через font-style: italic; .
Пример использования
В итоге, если мы выбрали подключение шрифта через @import в CSS, наш CSS файл будет выглядеть вот так:
/* Подключение шрифта*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); /* Определяем стиль для заголовка h1 */ h1{ /* В качестве гарнитуры выбираем подключенный шрифт"Open Sans" */ font-family: "Open Sans", sans-serif; /* Толщину кегля выбираем 300, что будет соответствоваьт начертанию Light - для тонкого кегля*/ font-weight: 300; }
Загрузка...
