📓

Tailiwind に Adobe Fonts の日本語フォントを通す

2022/03/09に公開

Tailwind CSS

Adobe Fonts

tech

とても単純なことでした…
だから誰も記事を書いていなかったのかな…？
Googleフォントとは導入方法が異なるため、ちょっと焦ったことも有り、備忘録的に残しておきます。

Adobe Fonts の導入

Adobe Creative Cloud のアカウントを持っていれば、Adobe FontsのフォントをWebフォントとしてサイトで利用できる。
以下の作業は、Creative Cloud のアカウントを持っている前提で記述する。

Webプロジェクトへのフォント追加

埋め込み用コードを貼る場所

Vue + Tailwindプロジェクトをローカルに作っているのであれば、プロジェクトルート直下に index.html があるはず。
埋め込み用コードは、index.html に貼る。

./index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
    
    <!-- ↓ こんな感じ ↓ -->
    <script>
      (function(d) {
          const config = {
                  kitId: 'XXXXXXX', // ← ここは、アカウントとWebプロジェクトごとにユニーク
                  scriptTimeout: 3000,
                  async: true
              },
              h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
    </script>
    <!-- ↑ こんな感じ ↑ -->

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

tailwind.config.js への追記

サイト全体に適用させるなら、以下のように記述。

./tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./stories/**/*.stories.ts",
  ],
  theme: {
    extend: {
      // ↓ 追記部分 ↓
      fontFamily: {
        body: ['a-otf-jun-pro']
      },
      // ↑ 追記部分 ↑
    },
  },
  plugins: [],
}

bodyタグに class を追記