Как вы используете пользовательские шрифты с TailwindCSS и NuxtJS?

Question

Итак, я создаю веб-сайт с NuxtJS, используя Tailwind CSS для своих стилей. Я использую модуль @nuxtjs/tailwindcss.

Проблема в том, что мои шрифты не загружаются в браузере. Верноеfont-family все еще применяется CSS, как вы можете видеть на скриншоте devtools, но браузер по-прежнему отображает мой текст с помощью Times New Roman.

- Скриншот Devtools

Мои файлы шрифтов - это файлы.ttf, хранящиеся в /assets/fonts/ папка в корневом каталоге моего проекта.

Мой tailwind.css файл выглядит так

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  src: url('../fonts/Montserrat-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  src: url('../fonts/Montserrat-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 900;
  src: url('../fonts/Montserrat-Black.ttf') format('ttf');
}

и мой tailwind.config.js выглядит так

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Montserrat'],
      serif: ['Montserrat'],
      mono: ['Montserrat'],
      display: ['Montserrat'],
      body: ['Montserrat']
    },
    // Some more irrelevant theme customization
 },
  variants: {},
  plugins: []
}

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

Моя интуиция подсказывает мне, что попутный ветер здесь не проблема, поскольку Devtools на самом деле показывают Montserrat в качестве вычисляемого шрифта, а сборка веб-пакета не вызывает никаких ошибок.

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

Буду очень признателен, если мне кто-нибудь поможет!

РЕДАКТИРОВАТЬ: я создал репозиторий Github, воспроизводящий проблему, его можно найти здесь, и все шаги для воспроизведения находятся в README.MD

Answer 1

Это не проблема с Tailwind, Vue или Nuxt - только в CSS.

Вы неверно указали формат в @font-face src. "ttf" - это расширение, а не имя формата. Вместо этого он должен быть "истинный тип". На самом деле, для woff или svg расширение совпадает с именем формата, поэтому оно может сбивать с толку с "ttf" и "truetype".

Так что просто замените:

src: url('../fonts/Montserrat-Regular.ttf') format('ttf');

С:

src: url('../fonts/Montserrat-Regular.ttf') format('truetype');

Или удалите формат, потому что он будет работать без него.

src: url('../fonts/Montserrat-Regular.ttf');

WOFF

Также было бы неплохо использовать новые и меньшие форматы: woff и woff2.

src:
  url('../fonts/Montserrat-Regular.ttf') format('truetype'),
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff')

Лично я использую только woff и woff2, так как он поддерживается во всех основных браузерах. На основеcaniuseПокрытие на данный момент составляет> 98%, поэтому, на мой взгляд, больше нет причин использовать TTF.

src:
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff')