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

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

  • автор:

Шрифт Play

На нашем сайте, вы можете скачать шрифт Play для своего сайта, или на свой компьютер, абсолютно бесплатно!
Добавляйте выбранные начертания и шрифты в «Коллекцию» нажав кнопку [+] , чтобы скачать ZIP архивом только те файлы шрифтов, которые Вам нужны.

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт Play Regular

1. Для того, чтобы установить шрифт Play Regular в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /PlayRegular /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "PlayRegular"; src: url("../fonts/PlayRegular/PlayRegular.eot"); src: url("../fonts/PlayRegular/PlayRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/PlayRegular/PlayRegular.woff") format("woff"), url("../fonts/PlayRegular/PlayRegular.ttf") format("truetype"); font-style: normal; font-weight: 400; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт Play Bold

1. Для того, чтобы установить шрифт Play Bold в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /PlayBold /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "PlayBold"; src: url("../fonts/PlayBold/PlayBold.eot"); src: url("../fonts/PlayBold/PlayBold.eot?#iefix")format("embedded-opentype"), url("../fonts/PlayBold/PlayBold.woff") format("woff"), url("../fonts/PlayBold/PlayBold.ttf") format("truetype"); font-style: normal; font-weight: 700; >

А лучше, используйте «коллекции» чтобы получить готовый архив с css файлом и нужными шрифтами, для этого жмите [+] и выбраный шрифт попадет в вашу коллекцию, можно добавлять разные шрифты и начертания, чтобы скачать только те, которые Вам нужны.
Кроме того, вы можете скачать сгенерированный плагин для WordPress сайта, и установить шрифты через менеджер плагинов в админке!

Копирование шрифтов в папку Dist

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

Копировать файлы можно с помощью Gulp, просто указав gulp.src и gulp.dest без всяких плагинов.

gulp.task('fonts', function() < return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts')) >)

Теперь Gulp будет копировать папку fonts из app в dist каждый раз при выполнении команды gulp fonts .

На данный момент у нас есть шесть разных задач в gulpfile, при этом каждая из них должна вызываться индивидуально из командной строки. Это довольно громоздко, поэтому мы хотим соединить всё вместе в одну команду. Прежде чем это сделать, рассмотрим, как автоматически очищать сгенерированные файлы.

Автор: Зелл Лью
Последнее изменение: 05.08.2023

  • Почему Gulp?
  • Установка Gulp
  • Создание Gulp-проекта
  • Определяем структуру папок
  • Написание первой Gulp-задачи
  • Препроцессинг с помощью Gulp
  • Подстановки в Node
  • Слежение за Sass-файлами
  • Перезагрузка с помощью Browser Sync
  • Оптимизация CSS и JavaScript-файлов
  • Оптимизация изображений
  • Копирование шрифтов в папку Dist
  • Очистка сгенерированных файлов
  • Комбинирование Gulp-задач
  • Заключение

Как добавить шрифт в WordPress без плагинов и глобально

настраиваем и работаем с WordPress

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

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

Для более ранних версий можно:

  • импортировать шрифты через css файл. Но и назначить его вы также сможете только через CSS. Этот шрифт не появится в списке редактора.
  • загрузить в папку /assets/fonts и прописать параметры шрифта в файле theme.json. Этим способом вы устанавливаете шрифт глобально. И его можно выбрать в редакторе в любом из установленных тем.

Мы рассмотрим оба варианта ниже.

Установка шрифта в WordPress через CSS и import

  1. Cперва вам нужно выбрать шрифт в каталоге бесплатных веб-шрифтов на сайте Google Fonts.
  2. Скопировать код для установки в шапку сайта и внутри файла style.css
  3. Указать в css для каких элементов использовать этот шрифт.

Когда вы выбираете шрифт в каталоге Google – убедитесь, что этот шрифт поддерживает русский язык. Для этого у шрифта должна быть опция cyrillic.

Выбирая шрифт на Google Fonts убедитесь, что он поддерживает русский язык

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

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

Для установки через CSS не нужно ничего скачивать – просто выбирайте опцию @import.

Копируйте код импорта и вставляйте в начало вашего файла стилей style.css
@import url(‘https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap’);

А ниже указывайте использование шрифта для нужного элемента. Пример CSS приведен там же в панели Google Fonts – справа. Например, для тега paragraph –

это будет выглядеть так.

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

Что это такое? Глобальные шрифты можно выбирать для различных блоков темы и для всей темы прямо в настройках Редактора тем.

установка шрифта в тему wordpress

Добавляет шрифт как глобальный для темы WordPress

ВАЖНО! Это работает только на современных темах WordPress, основанных на блоках.

Здесь вы также можете выбрать шрифт на Google Fonts, запомните его название, оно понадобится. Нам нужно его скачать. Но Google дает скачать только в ttf формате, а нам нужен .woff или .woff2.

Поэтому скачивать мы будем на другом сайте: Google Webfonts Helper

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

Скачивать шрифты Google лучше на сайте Google Fonts Helpers

Скачиваем файл архива, внутри него нам нужны только файлы с раширением *.woff. Нужно их распаковать и загрузить на сайт в папку вашей темы и далее в папку assets / fonts.

Прописываем шрифты в настройках темы Вордпресс

Настройки базовых стилей темы указаны в файле theme.json

Где его найти? В панели WordPress нужно зайти в Theme File Editor – вот где он прячется.

Это файл в формате XML. Редактировать его нужно очень аккуратно. Лучше сделать резервную копию файла на всякий случай. Нам нужно найти следующие строки.

 "typography":

Список шрифтов начинается после строки “fontFamilies”: [

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

< "fontFace": [ < "fontFamily": "Fira Sans", "fontStretch": "normal", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/fira-sans-v16-cyrillic_latin-regular.woff" ] >, < "fontFamily": "Fira Sans", "fontStretch": "normal", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./assets/fonts/fira-sans-v16-cyrillic_latin-italic.eot" ] >], "fontFamily": "\"Fira Sans\", sans-serif", "name": "Fira Sans", "slug": "fira-sans" >,

Первый блок для обычного шрифта, второй блок для наклонного italic, в третьем блоке – настройки как отображать его в теме WordPress.

Подробнее о том какие поля здесь описаны:

В первом поле мы описываем наш шрифт – Fira Sans.
Поле fontStretch может отличаться, только если вы скачали сжатый или растянутый вариант шрифта – extended / condenced. Во всех остальных случаях пишем просто normal.

fontstyle – в первом блоке указываем normal, во втором блоке уже italic.

какой указывать fontweight – это вы можете подглядеть на Google Fonts Helper. Когда вы скачивали шрифты – на странице были показаны все параметры. Обычно это 400.

в поле file нужно указать путь к файлу на сайте, куда вы его выгрузили.

В третьем блоке важно поставить обратные слеши перед кавычками, как в примере выше.
А в поле slug не должно быть пробелов.

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

Сохраняете файл. Теперь если вы все сделали правильно, заходите в раздел настройки темы или в Editor (Редактор). В списке шрифтов должен появиться только что установленный новый шрифт.

Шрифты по умолчанию

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

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

Если вы просмотрите параметры всех шрифтов в файле theme.json, то сможете заметить, что у двух из них в параметре slug указано не название, а body или heading.

 "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "body" >,

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

Надеюсь эта инструкция вам помогла в работе с движком на WordPress.

Шрифт Gotham Pro

На нашем сайте, вы можете скачать шрифт Gotham Pro для своего сайта, или на свой компьютер, абсолютно бесплатно!
Добавляйте выбранные начертания и шрифты в «Коллекцию» нажав кнопку [+] , чтобы скачать ZIP архивом только те файлы шрифтов, которые Вам нужны.

Как выглядит шрифт Gotham Pro

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro Light

1. Для того, чтобы установить шрифт GothamPro Light в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProLight /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProLight"; src: url("../fonts/GothamProLight/GothamProLight.eot"); src: url("../fonts/GothamProLight/GothamProLight.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProLight/GothamProLight.woff") format("woff"), url("../fonts/GothamProLight/GothamProLight.ttf") format("truetype"); font-style: normal; font-weight: 300; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro Regular

1. Для того, чтобы установить шрифт GothamPro Regular в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProRegular /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProRegular"; src: url("../fonts/GothamProRegular/GothamProRegular.eot"); src: url("../fonts/GothamProRegular/GothamProRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProRegular/GothamProRegular.woff") format("woff"), url("../fonts/GothamProRegular/GothamProRegular.ttf") format("truetype"); font-style: normal; font-weight: 400; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro Medium

1. Для того, чтобы установить шрифт GothamPro Medium в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProMedium /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProMedium"; src: url("../fonts/GothamProMedium/GothamProMedium.eot"); src: url("../fonts/GothamProMedium/GothamProMedium.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProMedium/GothamProMedium.woff") format("woff"), url("../fonts/GothamProMedium/GothamProMedium.ttf") format("truetype"); font-style: normal; font-weight: 500; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro Bold

1. Для того, чтобы установить шрифт GothamPro Bold в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProBold /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProBold"; src: url("../fonts/GothamProBold/GothamProBold.eot"); src: url("../fonts/GothamProBold/GothamProBold.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProBold/GothamProBold.woff") format("woff"), url("../fonts/GothamProBold/GothamProBold.ttf") format("truetype"); font-style: normal; font-weight: 700; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro Black

1. Для того, чтобы установить шрифт GothamPro Black в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProBlack /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProBlack"; src: url("../fonts/GothamProBlack/GothamProBlack.eot"); src: url("../fonts/GothamProBlack/GothamProBlack.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProBlack/GothamProBlack.woff") format("woff"), url("../fonts/GothamProBlack/GothamProBlack.ttf") format("truetype"); font-style: normal; font-weight: 900; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro LightItalic

1. Для того, чтобы установить шрифт GothamPro LightItalic в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProLightItalic /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProLightItalic"; src: url("../fonts/GothamProLightItalic/GothamProLightItalic.eot"); src: url("../fonts/GothamProLightItalic/GothamProLightItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProLightItalic/GothamProLightItalic.woff") format("woff"), url("../fonts/GothamProLightItalic/GothamProLightItalic.ttf") format("truetype"); font-style: italic; font-weight: normal; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro Italic

1. Для того, чтобы установить шрифт GothamPro Italic в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProItalic /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProItalic"; src: url("../fonts/GothamProItalic/GothamProItalic.eot"); src: url("../fonts/GothamProItalic/GothamProItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProItalic/GothamProItalic.woff") format("woff"), url("../fonts/GothamProItalic/GothamProItalic.ttf") format("truetype"); font-style: italic; font-weight: normal; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro MediumItalic

1. Для того, чтобы установить шрифт GothamPro MediumItalic в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProMediumItalic /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProMediumItalic"; src: url("../fonts/GothamProMediumItalic/GothamProMediumItalic.eot"); src: url("../fonts/GothamProMediumItalic/GothamProMediumItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProMediumItalic/GothamProMediumItalic.woff") format("woff"), url("../fonts/GothamProMediumItalic/GothamProMediumItalic.ttf") format("truetype"); font-style: italic; font-weight: 500; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro BoldItalic

1. Для того, чтобы установить шрифт GothamPro BoldItalic в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProBoldItalic /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProBoldItalic"; src: url("../fonts/GothamProBoldItalic/GothamProBoldItalic.eot"); src: url("../fonts/GothamProBoldItalic/GothamProBoldItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProBoldItalic/GothamProBoldItalic.woff") format("woff"), url("../fonts/GothamProBoldItalic/GothamProBoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700; >

Съешь ещё этих мягких французских булок, да выпей же чаю.
The quick brown fox jumps over the lazy dog
1234567890 !@#$%^&*()_+-=

Как установить шрифт GothamPro BlackItalic

1. Для того, чтобы установить шрифт GothamPro BlackItalic в свой HTML-проект, сперва скопируйе содержимое архива в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Структура проекта после установки шрифтов: / (корневой каталог шаблона или проекта) /fonts (Шрифты из архива распаковываем в папку /fonts) /GothamProBlackItalic /css (Папка со стилями должна находиться в той-же категории, что и /fonts) /stylename.css (Файл стилей, в котором подключаются русские шрифты) 

2. Далее вставляем код, указанный ниже, в файл стилей, который должен находиться в папке /css.

/* Код для подключения шрифта в /css/stylename.css */ @font-face < font-family: "GothamProBlackItalic"; src: url("../fonts/GothamProBlackItalic/GothamProBlackItalic.eot"); src: url("../fonts/GothamProBlackItalic/GothamProBlackItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/GothamProBlackItalic/GothamProBlackItalic.woff") format("woff"), url("../fonts/GothamProBlackItalic/GothamProBlackItalic.ttf") format("truetype"); font-style: italic; font-weight: 900; >

А лучше, используйте «коллекции» чтобы получить готовый архив с css файлом и нужными шрифтами, для этого жмите [+] и выбраный шрифт попадет в вашу коллекцию, можно добавлять разные шрифты и начертания, чтобы скачать только те, которые Вам нужны.
Кроме того, вы можете скачать сгенерированный плагин для WordPress сайта, и установить шрифты через менеджер плагинов в админке!

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

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