Підключення шрифтів

1. Shopify

Через інтерфейс Shopify можна задавати 2 основні шрифти.

Ці шрифти окремо задаються для заголовків, та для всього body. Перелік доступних шрифтів у Shopify досить великий, але часто буває що потрібний шрифт відсутній. В такому випадку можна додати та підключити його вручну,для цього(візьмемо для прикладу нам потрібно підключити outfit для body):

• Для початку у самому Shopify ставим шрифт на якийсь системний
• Далі завантажуєм потрібний нам шрифт у файлову систему Shopify
• У base.css підключаєм наш шрифт (з всіма потрібними для нього параметрами) на початку файлу, замінивши src на лінку з шрифтом який тільки що був завантажений
• Останнє що потрібно замінити, це задати головній змінній у root наш підключений шрифт

2. Ecomposer

Для Ecomposer є багато способів підключати шрифт, якщо основні шрифти були підключенні способом вище то вони будуть і у Ecomposer,але якщо потрібно інший шрифт для якогось елементу:

• Завантажуєм потрібний шрифт
• Вибираєм елемент, в якому потрібно замінити шрифт
• Після кліку по "Select font" зʼявляється вікно,де можна завантажити потрібний шрифт
• Після завантаження потрібного шрифта, він буде відображатись у тому ж вікні:

3. Надання шрифту вищої пріорітетності для завантаження

У деяких елементах(для прикладу announcment bar) часто додається незвичайний шрифт, який відрізняється від шрифту основного контенту. В таких випадках є сенс дати цьому пріорітет у завантаженні.

Для цього нам потрібно закинути link з потрібним шрифтом у head, причому вставити у випадку з announcment bar вище основних шрифтів

<link rel="preload" href="https://cdn.shopify.com/s/files/1/0910/8812/6247/files/rock.ttf?v=1734346665" as="font" type="font/ttf" crossorigin="anonymous">

rel="preload" - вказує браузеру, що цей шрифт має завантажуватись на початкових етапах, навіть якщо він ще не використовується.
href - вказує на шлях шо завантаженого шрифта.
as="font" — визначає тип ресурсу, що завантажується.
type="font/ttf" — специфікує MIME-тип шрифту.
crossorigin="anonymous" — додається, якщо шрифт завантажується з іншого домену (або навіть із CDN Shopify). В більшості випадків цей атрибут потрібен, щоб уникнути CORS-помилок.

Далі у секції, де ми задаєм стилі для нашого блоку оголошуємо @font-face, яке підключає потрібний шрифт:

@font-face {
font-family: 'rock';
src: url(https://cdn.shopify.com/s/files/1/0910/8812/6247/files/rock.ttf?v=1734346665);
}

Рекомендації

Важливо

Коли шрифт завантажується таким чином, то він завантажуєтсья на всі сторінки, і не важливо чи використовується він на сторінці чи ні

Умова завантаження

У випадку, коли не потрібно щоб шрифт завантажувався на всі сторінки, можна задати конкретну сторінку або темплейт

Для прикладу, якщо потрібно щоб шрифт завантажувався тільки на головну сторінку, достатньо просто обгорнути наш link у head в таку умову:

    {% if request.path == '/' %}
      <link rel="preload" href="https://cdn.shopify.com/s/files/1/0910/8812/6247/files/rock.ttf?v=1734346665" as="font" type="font/ttf" crossorigin="anonymous">
    {% endif %}

Саме {% if request.path == '/' %} вказує, що потрібно завантажувати його таким чином тільки для головної сторінки.