Меню Рубрики

Установка ttf шрифта на сайте

Как подключить шрифт на сайт в CSS

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

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

А также в файле стилей задаём правило для всех заголовков:

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

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

Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и другие. Еще существует формат для современных браузеров .woff2, но о нем мы расскажем в одной из следующих статей.

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

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

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

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

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fonts;
  3. Копируем уже готовый CSS-код для файла style.css;

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

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько:
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:

Как подключить шрифт к шаблону Moguta.CMS

  1. Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;

Как добавить ссылку с Google Fonts в шаблон Moguta CMS

  1. Заходим Настройки—>Шаблон—>template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:

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

источник

Установка TTF-шрифтов на компьютер

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

Установка TTF-шрифта в Windows

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

Этап 1: Поиск и скачивание TTF-шрифта

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

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

Этап 2: Установка TTF-шрифта

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

    Откройте папку со шрифтом и найдите в ней файл расширения .ttf.

Нажмите по нему правой кнопкой мыши и выберите пункт «Установить».

Дождитесь окончания процесса. Обычно это занимает пару секунд.

Зайдите в программу или системные настройки Windows (в зависимости от того, где вы хотите пользоваться этим шрифтом) и найдите установленный файл.

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

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

    Перейдите по пути C:\Windows\Fonts .

  • В новом окне откройте ту папку, где хранятся TTF-шрифты, которые требуется интегрировать в систему.
  • Выделите их и перетащите в папку «Fonts».

    Читайте также:  Установка инсталляции для унитаза на плитку

    Начнется последовательная автоматическая инсталляция, дождитесь ее окончания.

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

    Точно таким же образом можно устанавливать шрифты и других расширений, например, OTF. Удалять варианты, которые вам не понравились, очень просто. Для этого зайдите в C:\Windows\Fonts , отыщите название шрифта, кликните по нему правой кнопкой мыши и выберите «Удалить».

    Подтвердите свои действия нажатием на «Да».

    Теперь вы знаете, как устанавливать и применять TTF-шрифты в Windows и отдельных программах.

    Отблагодарите автора, поделитесь статьей в социальных сетях.

    источник

    Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон

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

    Одни шрифты выглядят более убедительно, другие — более интригующе.

    Но как подключить любые шрифты к сайту и применять их где захочется?

    В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.

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

    Если у вас сайт на Wordress, читайте способ №1, он — самый простой. Если вы разбираетесь в CSS — можете сразу перейти ко второму или третьему способу.

    Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )

    Если на ваш сайт установлена премиальная тема оформления — вы можете подключить шрифты за 2 минуты.

    Вы хотите изменить шрифт заголовков своих статей. Для этого:

    1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один — «настройки темы».

    2. Перейдите в раздел Typography (типография).

    3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):

    4. Нажмите на «Сохранить изменения».

    Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.

    Способ №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

    Способ №3. Кастомное подключение шрифтов с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )

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

    Где взять веб-шрифты для сайта

    А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

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

    Шаг 1. Перейдите на официальный сайт сервиса

    Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

    Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

    Например, если есть 4 начертания, будет написано 4 Styles:

    Обозначение начертаний шрифтов — нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

    Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

    Читайте также:  Установка vcenter server appliance iso

    Шаг 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 файла следующую запись:

    Где MyWebFont — это название шрифта, а значение свойства src (данные в скобках в кавычках) — их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

    Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

    Шаг 3. При подключении курсивного начертания, пропишите следующее:

    Где все то же самое, только свойству font-style мы придали значение italic.

    Шаг 4. Для подключения жирного начертания, добавьте следующий код:

    Где свойству font-weight мы задали значение bold.

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

    Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

    Ну вот и все 🙂 Только что вы подключили 4 начертания шрифта на свой сайт.

    Но есть одна ремарка — данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

    Как подключать шрифты для сайтов на разных CMS

    Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) — если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

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

    [popup_trigger >Подписывайтесь на мою рассылку [/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.

    Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.

    источник

    Свой шрифт на странице

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

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

    Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам

    . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

    Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

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

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

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

    Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

    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.

    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-файл в самом верху.

    В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

    Преимущества применения данного сервиса такие.

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

    Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

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

    источник

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