Как найти русские шрифты в google fonts. Текст заголовка, где оперативно меняем шрифт. b) Вызов шрифтов с помощью CSS. Использование @import

Что общего между свойством CSS @font-face и Google Web Fonts ?
@font-face позволяет использовать свои шрифты (не веб-безопасные шрифты) при отображении сайта, Google дает нам инструмент для быстрого внедрения. Этот самый Google создал онлайн хранилище шрифтов , чтобы мы с вами могли их использовать в своих работах. Самое главное — все шрифты абсолютно бесплатны и на 100% легальны. Profit

Итак, как это все работает?

Выбираем тип шрифта, который нам нужен (кириллица и латинница думаю будут актуальны у нас. Или есть люди из Камбоджи и Греции?)

Опишу работу со шрифтами, содержащими кириллицу, все же родной язык. Кириллических шрифтов в хранилище Google всего 8, очень мало. Но я надеюсь, что работы в этом направлении ведутся. Порадовала Canonical (компания, выпускающая Ubuntu), предоставив в свободный доступ фирменный шрифт из ОС Ubuntu 10.10 . Open Sourсe это хорошо.

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

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

В окне предварительного просмотра контролируем полученный результат.

Ниже код, который нам и нужен для сайта. Использовать его можно с некоторыми оговорками. По умолчанию, Google подключает все доступные начертания, иногда это лишнее. Код CSS тоже можно почистить, удалив те селекторы, которые не настраивали в окне параметров.

Как видим селектор который отвечает за шрифт в css, называется font. Чтоб поменять в css размер шрифта, надо прописать font-size:15px и менять количество пикселов до нужного значение. В css жирный шрифт указывается вот таким селектором: font-weight: bold и так далее.

Нужные начертания и пример использования шрифта для элементов страницы можно выбрать и увидеть на закладке “Use this font”

Очень удобная штука, этот Google Font API , подключить шрифт можно буквально за несколько минут, большой выбор шрифтов (для латинницы выбор действительно впечатляет) и скорость загрузки шрифта клиентом обеспечивается серверами Google.

И последнее. Любой шрифт для css из онлайн хранилища можно скачать к себе на компьютер для использования в системе. И это тоже совершенно бесплатно , попросят только donate(пожертвование), которое может быть и 0$. Тут уже все на вашей совести, каждый для себя решает — платить или нет.

Надеюсь, информация была полезной и вы узнали что-то новое

Спонсор материала.
Кондиционеры в интернет-магазине http://www.technodom.kz/catalog/konditsionery . Кондиционеры — лучшие товары, кредитование, огромный выбор, безупречный сервис.

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

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

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

Стандартные шрифты:

Cufon и @font-face

Ранее я уже писал про , с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ — это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.

Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.

В любом случае Cufon и @font-face уменьшают скорость загрузки сайта, хоть и не значительно.

Использование Google Fonts на сайте

Не буду расписывать много и долго, я приведу конкретный пример подключения Google Fonts, на примере этого блога.

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

Выбор шрифта в репозитории

Чтобы не пугались, объясню — репозиторий это хранилище, но по-буржуйски:). И так, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:

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

  • Word — отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
  • Sentence — отображение в виде одного предложения;
  • Paragraph — выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
  • Poster — отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.


Подключение шрифта к сайту

После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:

Ниже находится панель с выбором «типа отображения», выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:

После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов — через js, стандартный способ через подключение в и @import в css файле. Я использую последний способ.

Открываем свой файл css и прописываем строчку, которую нам предоставил google:

Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?

Использование в CSS

Всё достаточно просто, после того, как мы подключили шрифт через @import , нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:

h1, h2, h3 {font-family: ‘Cuprum’, sans-serif;}

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

На этом всё, спасибо за внимание и до скорых встреч.

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

Как подключить google fonts шрифты

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

Шрифты html без сервисов

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

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

Существует много сервисов, с помощью которых можно сделать конвертирование шрифт, я использую сервис fontsquirrel, webfont или программку fontoptimizer. Разобраться в них особого труда не составит. Открываем сайт fontsquirrel и переходим в раздел GENERATOR. Нажимаем на кнопку UPLOAD FONTS. Выбираем файл со шрифтом, который нужно конвертировать. Выбираем режим EXPERT.

Немного ниже, в пункте Subsetting, нужно выбрать Custom Subsetting... Снизу откроется список из возможных вариантов языков. Как в примере с добавлением шрифтов google, нужно точно так же выбрать кириллицу. Далее в самом низу соглашаемся и ставим галочку, что мы ничего не нарушаем и скачиваем архив с готовым шрифтов.

В архиве будет лежать четыре файла, вот они нам и нужны. Расширения файлов (eot, svg, woff, ttf) Заходим через FTP доступ на свой сайт и копируем в выбранную папку все четыре готовых файла.

Основные действия все сделаны, осталось только подключить шрифт css в таблицу со стилями. Открываем файл со стилями (style.css) и вставляем в него такой код. Что нужно в нем изменить! В моем примере я ранее использовал шрифт Lobster, вот его название нужно вставить в начале кода и в конце. Посмотрите на код ниже и вы все найдете, проблем с этим возникнуть не должно.

@font-face { font-family: "Lobster"; src: url("http://сайт/wp-admin/Fonts/Lobster-webfont.eot"); src: url("http://сайт/wp-admin/Fonts/Lobster-bold-webfont.eot?.woff") format("woff"), url("http://сайт/wp-admin/Fonts/Lobster-bold-webfont..svg#Lobster") format("svg"); font-weight: normal; font-style: normal;}

@ font - face {

font - family : "Lobster" ;

src : url ("http://сайт/wp-admin/Fonts/Lobster-webfont.eot" ) ;

src : url ("http://сайт/wp-admin/Fonts/Lobster-bold-webfont.eot?#iefix" ) format ("embedded-opentype" ) ,

url ("http://сайт/wp-admin/Fonts/Lobster-bold-webfont.woff" ) format ("woff" ) ,

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

2. - этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica . Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.


3. - содержит в себе четыре варианта стиля, что тем не менее не мешает ему занимать лидирующие позиции по популярности. Толчок к развитию данного шрифта дала Роспечать, которая поставила цель создать шрифт поддерживающий все различные варианты кириллицы, используемой на языках национальных меньшинств России. Шрифт PT Sans включает в себе символ российского рубля .


4. - этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.


5. Arimo - данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.



8. Cuprum - универсальный шрифт. Представляет собой зауженный гротеск. Доступен в четырех вариантах начертаний.



WebFonts - это технология использования сторонних шрифтов на своей веб-странице. Один из примеров:

Если начинать с истоков, тег font был введен в 1995 году, а уже в 1996-м было написано программное определение на CSS. Начиная с версии CSS 2.0 была введена загрузка и синтез шрифта в браузерах, но тем не менее тогда еще популярный, а ныне старый и неактуальный IE не имел поддержки загрузки шрифтов, что мешало бурному развитию использования шрифтов на своем сайте.

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

Форматы файлов

Для подключения шрифтов используется программная вставка в CSS, так называемое @-правило. Итак, в простейшей форме @font-face - это такая декларация. Выглядит она следующим образом:

/* Объявляем шрифт */ @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; }

Embedded OpenType?

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

Src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype")
В классическом варианте мы должны были указать с вами именно так:

Src: url("Имя_файла_шрифта.eot") format("embedded-opentype")
Но при добавлении символа "?" после формата шрифта мы принудительно указываем браузеру не читать последующее указание - format("embedded-opentype"). Internet Explorer поддерживает вложение шрифтов через так называемый фирменный Embedded OpenType стандарт, начиная с версии IE 4.0. Он использует метод управления цифровыми правами для предотвращения копирования шрифтов, которые распространяются по лицензии.

Что, если не поддерживается шрифт в браузере?

Давным-давно уже были придуманы обходные пути, так называемые «костыли» для отображения того или иного шрифта. Бывают случаи, когда шрифт был разработан только в формате SVG, или же только в формате TTF.

1. В стародавние времена разработчики подключали изображение, которое в свою очередь было текстом, набранным в визуальном редакторе. Однако сейчас это считается дурным тоном, ибо поддержка довольна затруднительна (нужно снова открывать редактор, чтобы изменить текст картинки), соответственно пользователь не может скопировать текст с картинки.

2. Также распространенным являлось использование flash-решений.

3. Другим решением является использование Javascript, чтобы заменить текст с VML (для Internet Explorer) или SVG (для всех остальных браузеров).

Какие проблемы еще могут возникнуть?

Браузер будет пытаться синхронизировать подгрузку шрифта, он будет стараться спрятать текст, то есть сделать его невидимым, пока шрифт не был подгружен. Этот эффект называют FOIT, эффект «белой вспышки».

Эффект вспышки

Эффект FOIT в таких браузерах, как Safari, Chrome, Opera, Firefox имеет тенденцию скрывать текст в течении максимум 30 секунд перед отказом в получении шрифта, после чего устанавливается шрифт по умолчанию.

Пример того, как загружается шрифт:

И все-таки, 2.7 секунды - это долгое время!

Что же можно сделать?

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

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

Изначально Bram Stein использовал кастомный шрифт, но после того, как его шрифт был подгружен, происходило «мерцание», в примере на 0.7 секунде:

Короче говоря, мерцание происходит тогда, когда браузер пытается отобразить шрифт из font-family и применить его в html. Шрифт, определенный в @font-face декларации, который не был еще загружен.

Bram Stein показал, как правильно подключать шрифты, он разработал скрипт, альтернативу от google для асинхронной подгрузки шрифтов, это скрипт - FontFaceObserver.

Пробуем

Анализ

Стандартное подключение от Google

Честно говоря, используя больше одного шрифта на сайте можно конкретно замедлить скорость загрузки страницы сайта, тем самым увеличивая общее время загрузки. Google Fonts API позволяет быстро добавить шрифт на сайт, используя генератор шрифтов, тем самым быстрее проектировать свой сайт. Однако, нужно помнить об эффекте FOIT. Общее время загрузки - 322 мс.

Web Font Loader от Google

Web Font Loader - JavaScript библиотека для расширенной работы с API, библиотека, которая дает нам больше контроля над подгрузкой шрифта, чем стандартный API Google Fonts. Скрипт позволяет нам использовать множество шрифтов, подгружая их последовательно или асинхронно. В отличие от стандартного подключения, на слабых соединениях показывается текст со стандартным шрифтом, до тех пор, пока не будет загружен шрифт.
Общее время загрузки: 1132 мс

FontFaceObserver

FontFaceObserver - это JavaScript библиотека (5кб), так называемый подгрузчик совместимый с любым веб-обслуживанием шрифта. Скрипт позволяет уведомить нас о том, загрузился ли шрифт или нет, позволяет отслеживать событие после загрузки и до загрузки шрифта. Общее время загрузки: 159 мс

Использование скрипта.



Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: