Как подключить скаченные шрифты в css
Перейти к содержимому

Как подключить скаченные шрифты в css

  • автор:

Шрифты в HTML (font, font-family, font-face)

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

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

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

Шрифт можно указать с помощью CSS свойства «font-family». Если перевести дословно название этого свойства, то получится «семейство шрифтов». В значении этого свойства необходимо указать название шрифта. К примеру:

Тише, мыши, кот на крыше.

На странице с таким кодом будет показан текст, написанный шрифтом Arial

Тише, мыши, кот на крыше.

Но текст будет написан этим шрифтом только в том случае, если этот шрифт есть у пользователя, который просматривает сайт. Если этого шрифта нет в его системе, то будет выбран стандартный. Поэтому если вы не хотите подключать файлы шрифтов в CSS, то стоит указать в качестве шрифта один из так называемых «веб безопасных шрифтов». Эти безопасные шрифты точно будут отображаться на любой системе. Вот список их названий и примеры:

Arial: Тише, мыши, кот на крыше. Arial: Тише, мыши, кот на крыше. Verdana: Тише, мыши, кот на крыше. Georgia: Тише, мыши, кот на крыше. Impact: Тише, мыши, кот на крыше. Arial Black: Тише, мыши, кот на крыше. Comic Sans MS: Тише, мыши, кот на крыше. Trebuchet MS: Тише, мыши, кот на крыше. Courier New: Тише, мыши, кот на крыше. Times New Roman: Тише, мыши, кот на крыше. 

В разных операционных системах шрифты могут выглядеть по-разному из-за авторских прав. К примеру, шрифта «Times New Roman» нет на операционной системе Linux (а на этой системе работает большинство мобильных устройств). В таких случаях система будет подставлять шрифт, который похож на требуемый, но не идентичен ему.

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

Тише, мыши, кот на крыше.
  • serif — шрифт с засечками на концах букв. К примеру, Times New Roman
  • sans-serif — шрифт без засечек. К примеру, Arial
  • cursive — курсивный шрифт
  • fantasy — декоративный шрифт
  • monospace — моноширинный шрифт (все буквы одинаковой ширины)
Тише, мыши, кот на крыше.

Шрифты в подключаемых файлах (font-face)

Чтобы специфический шрифт сайта попал к пользователю, файл со шрифтом необходимо передать. Делается эта загрузка благодаря CSS правилу @font-face. Чтобы загрузить файл шрифта, необходимо сначала положить его к себе на сайт или узнать ссылку на него на других сайтах. После того как будет получена ссылка на файл шрифта, на HTML странице можно подключить его и задать этот шрифт тексту через свойство font-family. Приведём пример HTML кода вместе со стилями:

  Тише, мыши, кот на крыше.
  • font-family — указывается название шрифта. Это название необходимо использовать далее в CSS правилах.
  • url(‘ . ‘) — указывается абсолютная или относительная ссылка на файл шрифта. У файлов шрифтов есть разные расширения: ttf, eot, woff, woff2. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.

Шрифты замедляют загрузку страницы. Ведь CSS правила читаются последовательно. И пока не закончится загрузка файлов шрифтов, указанных в @font-face, то страница не начнёт отображаться. Поэтому если хотите ускорить загрузку своего сайта, то подключайте их в самом конце страницы. Либо используйте веб безопасные шрифты. С другой стороны, достаточно загрузить шрифт один раз — потом он попадает в кеш.

Как использовать нестандартный шрифт на сайте

Как использовать нестандартный шрифт на сайте

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

Давайте я напишу CSS-код, а потом его поясню:

@font-face font-family: SpecialFont;
src: url(«font/specialfont.ttf»);
>
p font-family: SpecialFont;
>

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

Но недаром в большинстве случаев используют картинки для вывода нестандартных шрифтов. У использования @font-face есть 2 недостатка:

  1. Есть очень крупные шрифты, которые весят сотни килобайт, а это резко увеличит время загрузки страницы.
  2. Второй минус ещё серьёзнее. Не все браузеры поддерживают такую возможность, более того, некоторым браузерам нужен шрифт в другом формате (не ttf). Таким образом, у некоторых Ваш шрифт всё равно не отобразится. Чтобы решить данную проблему, надо загружать один и тот же шрифт в разных форматах, что в разы усилит первый минус.

Но стоит отметить, что первый минус уже не так принципиален как раньше. Так как скорости Интернет-соединения растут очень быстро, и уже мало, кого волнуют дополнительные 100-200 КБ.

Второй минус тоже не так принципиален. Единственные более-менее популярные браузеры, которые не поймут этого кода — это IE8 и ниже, плюс iOS. Все остальные современные браузеры без проблем данный код поймут.

Учитывая, что IE8 ещё относительно популярен, то лично я пока буду выводить нестандартные шрифты по-прежнему в виде картинки, но очень надеюсь, что в ближайшем будущем данный браузер станет историей, и тогда можно будет использовать @font-face и ttf-шрифты.

P.S. Всех женщин поздравляю с праздников весны!

Создано 08.03.2013 10:41:32

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 6 ):

    katushka 08.03.2013 20:07:58

    Спасибо за поздравление и за полезную статью!

    Быстрая загрузка веб-шрифтов на адаптивных сайтах

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

    pagespeed99

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

    0. Если лень читать полностью

    1. Используем шрифты только в формате woff
    2. Другие браузеры получает старые «безопасные» шрифты
    3. Загружаем шрифт в бинарном формате и оптимизируем его
    4. Отдаем шрифты сами
    5. Отдаем их в качестве CSS-файловURIs с закодированными в base64 данными
    6. Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage
    7. Иначе загружаем его из localStorage без обращения к серверу.
    8. Радуемся, потому что ваш сайт отображается намного быстрее, а ваши пользователи получают намного больше удобства

    Для тех, кто всё ещё читает, вот мои разъяснения, насчет верхних пунктов.

    Обновлено – 09.10.2014

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

    1. Демо-страница: Загрузка из шрифтов Google.
    2. Страница тестирования скорости: загрузка из шрифтов Google (79/100)
    3. Демо-страница: асинхронная загрузка и получение позже из localStorage.
    4. Страница тестирования скорости: асинхронная загрузка/ localStorage (100/100)

    1. Поддержка браузерами

    Согласно caniuse, 84% используемых браузеров поддерживают формат woff. Исключением являются старые браузеры – IE8 и встроенные браузеры старых андроидов. Следовательно, вполне достаточно предоставить веб-шрифты только современным браузерам с поддержкой формата woff. А старые браузеры могут довольствоваться запасным решением в виде шрифта Arial, например. А также пользователи будут вам признательны за то, что ваш сайт быстрее отображается в браузере. Просто постарайтесь найти то, что лучше подходит для дизайна вашего сайта.

    2. Не используйте внешние источники шрифтов, такие как Google Fonts или Typekit

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

    3. Необходимость лицензии

    Внимательнее выбирайте шрифт, который вы загружаете себе. К сожалению, не все лицензии позволяют это делать. Но к счастью, многие позволяют — как те, что с открытыми исходниками. Например, такие как Open Sans или Source Sans Pro. Когда вы выберете шрифт, скачивайте «двоичные» файлы (форматов otf или ttf)

    4. Оптимизация, уменьшение размера, генерация CSS

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

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

    5. Отдача CSS-файла

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

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

    Начиная со второй загрузки страницы, вы будете загружать только CSS-файл из localStorage. Который загружается достаточно быстро (5-50мс). Пользователи не увидят даже мерцания, потому что все действия синхронны, но потребуют всего пары миллисекунд.

    6. Покажите мне код

    После того, как мы сохранили файл в localStorage, этому методу необходим код только на клиентской стороне. Вот, возьмите:

     .  . 

    7. Чего мы добились

    1. Устранили как минимум один, а скорее всего множество блокирующих запросов
    2. Максимум одно мерцание у пользователя, во время замены «запасного» шрифта на веб-шрифт (первое посещение, первый запрос)
    3. Ускорили время отображения на первой странице запроса
    4. Улучшили показатели скорости в Google Page Speed Insights и WebPageTest.org

    8. Увидеть это в действии

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

    В этой статье всё ещё отсутствуют некоторые мелкие подробности. Если у вас есть вопросы или отзывы, то добро пожаловать в комментарии.

    Обновлено – 10.11.2014

    Пользователь Twitter’a @Kseso, проинформировал меня о другом подходе, который также получает 99/100 баллов в Google Page Speed Insights.

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

      Мы сразу же определяем семейство шрифтов в обычном HTML-файле:

     .  . 

    gfonts-timeline

  • Браузер не будет получать файл шрифта до тех пор, пока не убедится, что этот шрифт вообще понадобится где-либо на странице.
  • Браузер дождется окончательного построения DOM и CSSOM
  • Браузер начнёт получать файл шрифта из Google Fonts (заметьте, что для fonts.gstatic.com требуется лишний DNS-запрос). Эта шкала времени показывает, как браузер начинает загружать файл шрифта только перед событием DOMContentLoaded.
  • Если вам этого мало, большинство браузеров просто отобразят пустой текст на месте загружаемого шрифта:
    1. Только IE начнёт отображение немедленно с «запасными» шрифтами
    2. Firefox и Chrome35+ ждут полной загрузки шрифта в течение трех секунд (а затем отображают «запасной» шрифт)
    3. Safari и Chrome до 35-й версии ждут полной загрузки шрифта без каких-либо таймаутов.
  • Поэтому на медленных соединениях вы задержите отображение текстового содержания вплоть до 3 секунд в большинстве браузеров. В худшем случае, если ваш шрифт слишком долго грузится (например, из-за плохого мобильного соединения), пользователи Safari вообще не увидят текстового содержания и просто покинут вашу страницу. Пользователи могут видеть белую страницу до срабатывания таймаута.

    Больше информации можно найти в блоге Ильи Григорика.

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

    P.S. Это тоже может быть интересно:
    • CSS-выражения от контейнера для дизайнеров
    • Не боритесь с каскадом, управляйте им!
    • Голограммы, пленочные засветки и шейдеры на чистом CSS

    Если вам понравилась статья, поделитесь ей!

    Как применить собственный шрифт в аккаунте GetCourse

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

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

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

    Содержание:

    • Как подготовить шрифты
    • Как подключить шрифты:
      • на странице
      • в виджете
      • в уроке
      • во всем аккаунте

      Ссылка на это место страницы: #formaty-shriftov

      Как подготовить шрифты

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

      Разные браузеры поддерживают разные форматы шрифтов. Например, Internet Explorer 11 использует woff, а большинство других браузеров воспринимают otf (opentype). Следовательно, чтобы шрифт воспроизводился во многих браузерах, нужно подключить сразу несколько форматов шрифта.

      Если шрифт представлен только в одном формате или нужного формата нет, вы можете использовать сторонний сервис, чтобы сгенерировать подходящий формат шрифта. Как это сделать, покажем на примере генератора шрифтов https://transfonter.org/.

      Предположим, у вас есть шрифт в формате otf. Чтобы получить этот шрифт в формате woff:

      1. Нажмите Add fonts и выберите шрифт в формате otf.
      2. Отметьте чекбокс с форматом WOFF.
      3. Нажмите Convert.
      4. Нажмите Download и скачайте архив со шрифтом выбранного формата.
      5. Разархивируйте скачанный шрифт, для удобства можете переместить форматы шрифта woff и otf в одну папку.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *