Шрифты

С выпуском Publii версии 0.39.0 в наших темах произошли существенные изменения в способе загрузки шрифтов. Ранее шрифт Google загружался непосредственно из своего CDN. Однако, поскольку большинство браузеров заблокировали передачу данных кэширования ресурсов между доменами, пользователи должны повторно загружать файлы шрифтов для каждого посещаемого ими сайта, использующего один и тот же шрифт, независимо от того, был ли он загружен и кэширован ранее с другого сайта. Что еще более важно, суд ЕС постановил, что шрифты Google (загруженные непосредственно из его CDN) не соответствуют GDPR, который требует получения согласия перед сбором и хранением какой-либо личной информации, позволяющей установить личность.

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

Позволяет избежать дополнительного поиска в DNS
Удаляет неминифицированный CSS
Обеспечивает лучший контроль над настройками кэша
Соответствует GDPR

Переменные шрифты

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

Еще одно преимущество использования переменных шрифтов заключается в том, что теперь мы можем манипулировать их размером во всем диапазоне; вместо того, чтобы выбирать только между отображением шрифта 400 (обычный) или 700 (жирный), мы можем выбрать отображение данного шрифта с кажущимся случайным размером, таким как 436, что дает нам еще больший контроль при настройке стиля нашего сайта.

Довольно здорово, не правда ли?

Еще одна вещь, на которую следует обратить внимание; возможно, вы заметили, что мы опустили некоторые модные шрифты, такие как “Open Sans” или “Noto Sans”, из шрифтов, включенных в Publii. Мы решили не включать эти шрифты, поскольку их вес (размер) слишком велик, что неприемлемо при создании легкого статического веб-сайта, для которого предназначена CMS Publii.

Список доступных шрифтов с их описанием

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

Name	Weight range	Size
Serif
Aleo	100 - 900	66 kb
Andada Pro	400 - 840	106 kb
Besley	400 - 900	49 kb
Bitter	100 - 900	108 kb
Brygada 1918	400 - 700	89 kb
Domine	400 - 700	40 kb
Faustina	300 - 800	49 kb
Frank Ruhl Libre	300 - 900	78 kb
Imbue	100 - 900	90 kb
Kreon	300 - 700	33 kb
Labrada	100 - 900	86 kb
Lora	400 - 700	83 kb
Manuale	300 - 800	76 kb
Petrona	100 - 900	86 kb
Playfair Display	400 - 900	106 kb
Roboto Slab	100 - 900	117 kb
Rokkitt	100 - 900	53 kb
Yrsa	300 - 700	90 kb
Sans Serif
Advent Pro	100 - 900	66 kb
Antonio	100 - 700	37 kb
Archivo Narrow	400 - 700	37 kb
Asap	400 - 700	57 kb
Assistant	200 - 800	37 kb
Cabin	400 - 700	45 kb
Cairo	200 - 900	74 kb
Dosis	200 - 800	47 kb
Exo	100 - 900	54 kb
Figtree	300 - 900	29 kb
Glory	100 - 800	42 kb
Heebo	100 - 900	41 kb
Instrument Sans	400 - 700	49 kb
Jura	300 - 700	78 kb
Karla	200 - 800	42 kb
Lexend	100 - 900	74 kb
Libre Franklin	100 - 900	44 kb
Manrope	100 - 900	53 kb
Maven Pro	400 - 900	42 kb
Merriweather Sans	300 - 800	93 kb
Montserrat	100 - 900	125 kb
Nunito	200 - 900	100 kb
Orbitron	400 - 900	16 kb
Oswald	200 - 700	66 kb
Plus Jakarta Sans	200 - 800	61 kb
Public Sans	100 - 900	40 kb
Quicksand	300 - 700	52 kb
Raleway	100 - 900	128 kb
Red Hat Display	300 - 900	41 kb
Roboto Flex	100 - 900	78 kb
Rubik	300 - 900	77 kb
Ruda	400 - 900	38 kb
Smooch Sans	100 - 900	41 kb
Spartan	100 - 900	44 kb
Urbanist	100 - 900	38 kb
Work Sans	100 - 900	131 kb
Yanone Kaffeesatz	200 - 700	53 kb
Cursive
Big Shoulders Display	100 - 900	82 kb
Comfortaa	300 - 700	80 kb
Dancing Script	400 - 700	59 kb
Gluten	100 - 900	79 kb
Lemonada	300 - 700	81 kb
Monospace
JetBrains Mono	100 - 800	71 kb
Red Hat Mono	300 - 700	29 kb
Source Code Pro	200 - 900	85 kb

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

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

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

Перейдите в эту папку: /Documents/Publii/sites/Your_site/input/themes/Your_theme/
Скопируйте ваш файл шрифтов, your_font.woff2, в папку /assets/dynamic/fonts/your_font/

Откройте config.json файл и добавьте название вашего шрифта в двух разделах: fontBody и fontHeadings, затем сохраните изменения.

{
    "name": "fontBody",
    "label": "Body font",
    "group": "Fonts",
    "value": "system-ui",
    "type": "select",
    "options": [
        {
            "label": "Your Font Name",
            "value": "your-font-name",
            "group": "Serif"
        },
...

{
    "name": "fontHeadings",
    "label": "Headings font (H1-H6)",
    "group": "Fonts",
    "value": "system-ui",
    "type": "select",
    "options": [
        {
            "label": "Your Font Name",
            "value": "your-font-name",
            "group": "Serif"
        },
...

Затем откройте theme-variables.js файл и добавьте свой шрифт в разделе fontParams, указав семейство шрифтов и их вес, и сохраните изменения.
```
var generateThemeVariables = function (params) {
  let fontParams = {
    your-font-name: {
      name: 'Your Font Name',
      family: '\'Your Font Family\', serif',
      weight: '100 900'
    },
...
```

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

Вот и все; теперь вы должны иметь возможность выбрать шрифт из опций темы и использовать его на своем сайте.

Переменные шрифты

Список доступных шрифтов с их описанием

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

Subscribe