Іноді нам потрібно застосувати різні шрифти для тексту на нашому веб-сайті і це зовсім не складно. Є багато способів підключити шрифт до сайту, на так як ми використовуємо CMS Drupal ми можемо використовувати для підключення шрифту модуль @ font-your-face, який дозволяє додати будь-який шрифт на ваш веб-сайт. Я покажу вам наступні кроки для установки і використання цього модуля.
Модуль @ font-your-face може робити наступне:
- Шрифти можна застосувати до конкретного тексту на веб-сайті, він може використовувати сімейство шрифтів ідентифікатор в файлі CSS або написання CSS селектор в інтерфейсі модуля @ font-your-face безпосередньо.
- Ви можете імпортувати ваші власні локальні шрифти з СРВ, TTF, WOFF у SVG форматів.
Установка модуля @ font-your-face:
- Розпакуйте завантажений архів модуля і завантажте папку модуля в папку для модулів сайту (sites / all / modules / fontyourface).
- Перейдіть в розділ управління модулями (admin / modules) і включіть модулі @ font-your-face, @ font-your-face UI також включите під модулі які необхідні для роботи.
Інші опції які ми можемо включити:
Після установки модуля:
- Переходимо на сторінку налаштувань модуля @ font-your-face (admin / appearance / fontyourface / browse) щоб включити шрифти.
- тут, Ви можете бачити шрифти які Вам потрібні, наприклад, введіть: Dosis. І Вам будуть надані всі шрифти з цим ім'ям.
- Нижче кожного шрифту є опція включити його, клікніть включити шрифт який Вам потрібен. Так само там є опція відключити шрифт.
Якщо ми хочемо, ми можемо вибрати CSS селектор до якого буде застосований вибраний шрифт. Наприклад: H1, H2 і інші.
Також, коли Ви редагуєте шрифт, тут завжди є опція вказати кілька CSS селекторів через кому.
2. Використовуйте @ font-your-face модуль через .info файл теми:
- У настойках модуля (/ admin / appearance / fontyourface), клікніть на вкладці "In theme".
- І Ви побачите код з шрифтами які вже іспользуютс.
- Розмістіть цей код.
- Вставте цей код в ваш файл theme.info теми.
- Потім використовуючи font-family ідентифікатор в CSS файлі теми, ми можемо застосовувати шрифт, який ми вже включили.
3. Імпорт локальних шрифтів. Іноді ми не можемо знайти шрифти, які ми хочемо застосувати, тому @ font-your-face дає нам можливість імпортувати локальні шрифти.
- У настойках модуля (/ admin / config / user-interface / fontyourface / local_fonts)
- Додам назва шрифту, вибираємо стиль шрифту (style) і жирність (font-weight).
- Завантажуємо шрифт на сервер, це можуть бути EOT. TTF. WOFF. SVG формати файлів.
- Потім, використовуючи font-family ідентифікатор в CSS файлі Вашої теми, Ви можете застосувати шрифт, який ми вже включили.
На цьому все, і так ми маємо кілька різних способів додати шрифт на наш сайт.