Nuxt / Tailwind Projectでカスタムフォントのロード

こんにちはみんなと私の英語が残念です。

テールワインドでNUXT.JSプロジェクトを作成しました。私のフォントファミリをカスタマイズしたいので、Googleフォントからいくつかのフォントファイルをダウンロードしました。私はTailwind Docsを読んでいましたが、ファイルのロード用にFontファイルを配置する方法やConfig Tailwindの場所を理解することはできません。

誰かが私を助けることができれば私はとても感謝します。

nuxt.jstailwind-css

2020/04/25Grijander

たくさんのラミグをありがとう。いくつかのテストエラーの後、あなたの答えを知るために、私は別の解決策を得ました。私はフォルダファイルを "静的"フォルダ内に作成したフォルダ "フォント"に置かれました。資産> CSS> TailWind.css：

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

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 500;
  src: url('/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
}
 _

Tailwind.configで：

theme: {
    extend: {
        fontFamily: {
             heading: ['Roboto', 'sans-serif'],
             body: ['OpenSans', 'sans-serif']
        }
    }
}
 _

その後、必要な要素でクラス "フォント見出し"または "font-body"を使用する必要があります。フォントのフォント重量は、TailSwindのフォント重みクラスと関係が必要です。たぶん私たちは今2つの異なる闘争をしています。ありがとうございました。

2020/04/26Grijander