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

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

  • автор:

Веб-шрифты 2016. Подключаем, используем.

Раньше для того, чтобы подключить сторонний шрифт на сайт использовалась директива @font-face с ссылкой на шрифт в нескольких форматах(eot, svg, ttf, woff и т.д.). В 2015 году появилась возможность использовать кеширование шрифта в localstorage, а также отпала необходимость использовать много разных форматов. О том, как наименее трудозатратно и удобно использовать веб-шрифты в 2016 году и пойдет речь в этой заметке.

Итак, суть метода:

  1. Берем шрифты в формате woff или woff2
  2. Конвертируем шрифты в base64 в автоматическом режиме(gulp)
  3. Асинхронно загружаем шрифты на страницу через js-функцию.
  4. При первой загрузке страницы — шрифты загружаются в первый раз, что вызовет небольщое “моргание”
  5. При последующих загрузках шрифт будет приходить с localstorage, “морганий не будет”

Конвертация

Для конвертации мы будем использовать gulp-плагин gulp-cssfont64. Если вы не работали с gulp’ом рекомедую статью на нашем блоге Начинаем работать с gulp.js. Устанавливаем плагин, прописываем в gulpfile зависимость и таск:

cssfont64 = require('gulp-cssfont64'); gulp.task('fontsConvert', function ()  return gulp.src([assetsDir + 'fonts/*.woff', assetsDir + 'fonts/*.woff2']) .pipe(cssfont64()) .pipe(gulp.dest(outputDir + 'styles/')) .pipe(browserSync.stream()); >);

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

Добавим watcher, чтобы шрифты конвертировались автоматически:

gulp.task('watch', function ()  gulp.watch(assetsDir + 'fonts/**/*', ['fontsConvert']); >);

Убедитесь, что ваши шрифты сконвертированы. Например из файла ‘assets/fonts/roboto-blackitalic.woff’ получился ‘dist/styles/roboto-blackitalic.css’.

Асинхронная загрузка

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

  src="js/font-loader.js">  rel="stylesheet" media="all" href="styles/main_global.css">

Содержимое файла font-loader.js

function loadFont(a,b,c,d)function e()if(!window.FontFace)return!1;var a=new FontFace("t",'url("data:application/font-woff2,") format("woff2")',<>),b=a.load();tryb.then(null,function()<>)>catch(c)<>return"loading"===a.status>var f=navigator.userAgent,g=!window.addEventListener||f.match(/(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/)&&!f.match(/Chrome/);if(!g)var h=<>;tryh=localStorage||<>>catch(i)<>var j="x-font-"+a,k=j+"url",l=j+"css",m=h[k],n=h[l],o=document.createElement("style");if(o.rel="stylesheet",document.head.appendChild(o),!n||m!==b&&m!==c)var p=c&&e()?c:b,q=new XMLHttpRequest;q.open("GET",p),q.onload=function()q.status>=200&&q.status400&&(h[k]=p,h[l]=q.responseText,d||(o.textContent=q.responseText))>,q.send()>else o.textContent=n>> loadFont('roboto-blackitalic', 'styles/roboto-blackitalic.css');

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

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

$main_font:'roboto-blackitalic',sans-serif; html  font: normal 10px/1.33 $main_font; >

Как называть переменные для шрифтов — выбор за вами.

Тем временем в браузере

При первой загрузке страницы ваш текст немного моргнет. Сначала загрузится дефолтный шрифт, который вы указали в переменной(в нашем случае sans-serif), а затем основной шрифт. В Chrome в вкладке Network отобразится загрузка шрифта:

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

Как подключить к сайту TTF-шрифт в четырех разных начертаниях (regular, italic и пр.)?

И мне нужно подключить его к сайту, вроде как Google Fonts.

Какова последовательность нужных шагов?

1. Например, чтобы подключить Фиру я размещаю на странице мета-тег:

2. а потом в CSS:

font-family: ‘Fira Sans’;

А какие шаги нужно сделать чтобы подключить TTF в 4-х разновидностях: Regular, Italic, Bold, Bold Italic? И как их потом использовать?

  • Вопрос задан более трёх лет назад
  • 435 просмотров

Комментировать
Решения вопроса 1

Ankhena

Нежно люблю верстку

Сейчас не нужно подключать ttf, нужны woff2 и woff

Подключать так (название файла должно быть одинаковым, меняется начертание и жирность)

@font-face < font-family: "OpenSans"; src: url("fonts/opensans.woff2") format("woff2"), url("fonts/opensans.woff") format("woff"); font-weight: normal; font-style: normal; >@font-face < font-family: "OpenSans"; src: url("fonts/opensansbold.woff2") format("woff2"), url("fonts/opensansbold.woff") format("woff"); font-weight: 700; font-style: normal; >

Использовать так:

Либо идете на google fonts и подключаете оттуда https://fonts.google.com/specimen/Open+Sans
Нужные вариации выбираются.

5e060dfebb82b632500233.png

Ответ написан более трёх лет назад
Нравится 2 3 комментария
Роман @procode Автор вопроса

Либо идете на google fonts и подключаете оттуда https://fonts.google.com/specimen/Open+Sans

В том и дело, что нужного мне шрифта (Opel Sans) нет на гугль фонтс. Так бы я голову не стал морочить конечно 🙂

За остальное — спасибо!

Скажите, а Italic как подключить?

Т.е. для болда мы меняем font-weight: 700; а для италика?

Ankhena

Роман, font-style: italic разумеется

И полно конвертеров из ttf в woff и woff2

Роман @procode Автор вопроса

еще раз спасибо!

Ответы на вопрос 1
https://creditpower.ru
Все то же самое. Надо 4 шрифта подключать с разными начертаниями.
Ответ написан более трёх лет назад
Роман @procode Автор вопроса
то же самое что и где?

Роман, https://fonts.google.com/selection?subset=cyrillic — тут шрифты. Находишь нужные 4шт начертания, и либо качаешь на локалку либо онлайн подключаешь. Онлайн будет лучше с гугловских серверов. Быстрее будет работать. Там вроде кнопкой + можно сразу сет собрать и он тебе сразу css сгенерит для фонтов.

Юзай хром, включи перевод если с английским плохо. Там все просто. Но смысл, как ты и писал. Нюансы по начертаниям только. Там примеры есть — разберешся.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

веб-разработка

  • Веб-разработка

Как ограничить возможность скачать видео?

  • 1 подписчик
  • 16 часов назад
  • 70 просмотров

веб-разработка

  • Веб-разработка
  • +1 ещё

Как обойти защиту сайта от прокси серверов?

  • 1 подписчик
  • 18 часов назад
  • 105 просмотров

Как подключить шрифт на сайт, шрифты Google Fonts

19.09.18 ИТ / CSS 2703

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

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

Как задать шрифт для нужного элемента страницы? Для этого есть специальное свойство из семейства font – font-family. Пример задания шрифта приводится ниже:

.class

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

Лучше конечно не использовать стандартные шрифты, так как в таком случае сайт будет выглядеть не очень современно. Гораздо лучше подобрать красивый шрифт для сайта в специальном сервисе, например, в Google Fonts.

google-fonts

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

google-fonts-customize

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

google-fonts-embed

Также можно загрузить шрифт с Google Fonts и подключить его локально. Для этого следует навести на значок загрузки в верхнем правом углу открывшегося окна. Это может пригодиться в некоторых случаях.

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

12 февраля 2016

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

Дорожный знак 100 на дороге уходящей в даль

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

Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) — они бесплатны; второе — Font Awesome — предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.

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

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

1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела , лучше повыше или перед закрывающим , это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:

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

— дать путь только к папке:

— удаленно подключить файлы с CSS из соответствующей папки:

3. После загрузки архива с фалами, извлечь только содержимое папки Fonts и подключить иконочный шрифт, используя правило CSS @font-face:

@font-face <
font-family: ‘fontello’;
src: url(‘..путь-к-файлу/fontello.eot‘);
src: url(‘..путь-к-файлу/fontello.woff‘) format(‘woff’),
url(‘..путь-к-файлу/fontello.ttf‘) format(‘truetype’),
url(‘..путь-к-файлу/fontello.svg#fontello‘) format(‘svg’);
font-weight: normal;
font-style: normal;
>

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

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

Если воспользоваться вторым вариантом — подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:

1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:

2. Добавить класс с названием символа к нужному элементу:

3. Добавить в CSS псевдоэлемент для элемента с иконкой, который будет содержать UTF-код желаемого символа и указывать на используемый шрифт (в данном примере — Fontello):

ul li a::before <
content: ‘\e80a‘;
font-family: «fontello»;
font-style: normal;
font-weight: normal;
>

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

[class^=»icon-«]::before,
[class*=» icon-«]::before font-family: «fontello»;
font-style: normal;
font-weight: normal;
>
.icon-doc-inv::before content: ‘\e801‘;
>
.icon-mail-alt::before content: ‘\e805‘;
>

но можно обойтись и без нее, запись вида:

будет работать все равно.

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

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