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

Как подключить нестандартный шрифт к сайту с помощью @font-face

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и красивых шрифтов. Благодаря таким шрифтам дизайн получает свою изюминку и эксклюзивность. Вот только нестандартные шрифты будут отображаться только на том компьютере, на котором они уже установлены, поэтому, чтобы нормально с ними работать, дизайнер должен предоставить вам все шрифты, которые использует в своем макете. Потому что при верстке макета придется установить эти шрифты на свой компьютер. Но вот пользователь вашего сайта не будет скачивать себе все шрифты и не будет устанавливать их на свой компьютер, поэтому нужно сделать, чтобы браузер подтягивал нужные шрифты сам. Здесь поможет правило @font-face, есть еще варианты использовать Cufon или подгружать шрифты с Google Webfonts или Fontsquirrel, но на Google Webfonts и Fontsquirrel может не оказаться нужно шрифта, поэтому рассмотрим самый оптимальный вариант — подключение уникальных шрифтов с помощью @font-face.

Самый простой способ подключить шрифт — прописать в таблице стилей:

@font-face < font-family: 'PF Din CompPro'; src: url('fonts/pfdintextcomppro-webfont.ttf'); >body

Здесь ‘PF Din CompPro’ — название шрифта, и далее вы можете указать этот шрифт для нужных элементов сайта, а fonts/pfdintextcomppro-webfont.ttf — это путь к вашему шрифту, который лежит в папке fonts, важно, чтобы в названии файла шрифтов не было пробелов, лучше замените их на тире.

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

Каждый браузер поддерживает свои форматы шрифтов:

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

Поэтому вам придется из одного своего шрифта в формате .ttf сделать еще несколько таких же шрифтов только в другом формате. Здесь поможет генератор шрифтов на сайте fontsquirrel.com. На этой странице загрузите свой шрифт, выберите настройки Optimal, отметьте чекбокс с подтверждением о легальности загружаемого шрифта (некоторые шрифты стоят очень много денег и у вас должно быть разрешение на их использование), затем нажмите кнопку «Download Your kit» и вы получите нужный архив со всеми форматами своего шрифта.

Из архива скачайте все форматы ваших шрифтов, по идее это 4 файла с расширениями .eot, .svg, .ttf и .woff , эти файлы скопируйте в папку fonts на своем сайте, так же в архиве будет лежать файл stylesheet.css — в нем уже будут прописаны все правила для подключения шрифтов, можете смело скопировать их в свою таблицу стилей, только не забудьте указать свои пути к файлам шрифтов, например, к папке fonts. Пример того, что получилось на одном из моих сайтов:

@font-face < font-family: 'PF Din CompPro'; src: url('fonts/pfdintextcomppro-webfont.eot'); src: url('fonts/pfdintextcomppro-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/pfdintextcomppro-webfont.woff') format('woff'), url('fonts/pfdintextcomppro-webfont.ttf') format('truetype'), url('fonts/pfdintextcomppro-webfont.svg#pf_din_text_comp_pro') format('svg'); font-weight: normal; font-style: normal; >body

С такими параметрами шрифты отображаются в любых браузерах, включая всеми любимый IE-7-8-9.

Если вы используете нестандартные шрифты для кириллицы, т. е. для русских символов, и шрифт неправильно отображается на сайте, тогда возможно поможет генерирование шрифта с расширенными настройками, на странице http://www.fontsquirrel.com/tools/webfont-generator загрузите свой шрифт и выберите настройки «Expert«. Там много настроек, все я не знаю, но внимательно прочитайте и выберите необходимые для вас, а для поддержки кириллицы выберите в блоке Subsetting: раздел Custom Subsetting… и отметьте чекбокс Cyrillic, а так же отметьте нужные для вас языки и форматы.

Пример того, что получилось у меня вот:

Небольшой апдейт 04.02.2021.

На данный момент достаточно подключать .ttf или .woff (woff2) шрифты, но .ttf весит много, поэтому лучше .woff (woff2), которые сжаты и оптимизированы для WEB. Так же не забывайте для гугла добавлять font-display: swap .

@font-face < font-family: 'PF Din CompPro'; src: url('fonts/pfdintextcomppro-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; >body

На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…

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

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

15) Вёрстка шапки, шрифты

Шрифты от Google — https://fonts.google.com/

Веб-шрифты — https://webfonts.pro/

Конвертер шрифтов — https://transfonter.org

Ссылка на FIGMA КЛИК

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

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

КАК ПОДКЛЮЧИТЬ ШРИФТ НА САЙТ В CSS

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

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

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

 @font-face  // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом) font-family: "RalewayRegular"; // адрес шрифта и тип src: url("../fonts/RalewayRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; >

 h1 font-family: "RalewayRegular"; >

 @font-face  font-family: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; > @font-face font-family: "RalewayBold"; src: url("../fonts/RalewayBold.ttf") format("truetype"); font-style: normal; font-weight: normal; >

 @font-face  font-family: "RalewayRegular"; src: url("../fonts/RalewayRegular/RalewayRegular.eot"); src: url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/RalewayRegular/RalewayRegular.woff") format("woff"), url("../fonts/RalewayRegular/RalewayRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; >