Nuxtで早期アクセスのGoogle Fontsを使う

投稿日
Nuxtで早期アクセスのGoogle Fontsを使う

早期アクセスのニクキュウフォントが使いたい 😸



Nuxtで早期アクセスのGoogle Fontsを使ってみます。

検証した環境

1 nuxt 2.14.3

早期アクセスとは?

Google Fontsには「早期アクセス」というものが存在します。

Google Fontsには早期アクセスがある


調べてみると英語ですが公式に書いてありました

We look forward to adding support for many new languages to Google Fonts. To accelerate this process, we would like to get your feedback on our latest fonts. Note, some of the fonts have since graduated.

Early Access - Google Fontsより引用


gogle翻訳してみると(何でもgoogleやな。笑)

GoogleFontsに多くの新しい言語のサポートが追加されることを楽しみにしています。 このプロセスを加速するために、最新のフォントに関するフィードバックをお寄せください。 一部のフォントはその後卒業していることに注意してください。

つまり、


ベータ版的な立ち位置なフォントだよ。 フォントによってはなくなる可能性もあるから気をつけてね。


という事のようです。

早期アクセスのGoogle FontsをNuxtで使う

以前記載した nuxt-webfontloaderを使って読み込み方法は難しそう でした。


nuxt-webfontloader公式GitHubに習って以下のように書いてみましたが無理

nuxt.config.js
// 以下のようにしても出来ない
export default {
  webfontloader: {
      // add Google Fonts as "custom" | workaround required
      custom: {
          families: [
              'Nikukyu',
              'Roboto:n3,n7'
          ],
          urls: [
              // for each Google Fonts add url + options you want
              // here add font-display option
              'https://fonts.googleapis.com/earlyaccess/nikukyu.css',
              'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
          ]
      }
  },
}



そのため、 ここではおとなしくnuxt.config.jsの head を用いた方法で書きます。

nuxt.config.js
export default {
  ・・・
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/earlyaccess/nikukyu.css' },
    ],
  },
  ・・・
}

こうすればheadタグ内に書き出されます。

linkタグを使って読み込まれる

あれ?こんな簡単なら nuxt-webfontloader 使わなくても良いかも。。?🤔




あとは使いたい部分でfont-familyを設定するだけ

<h1>ソウキアクセスだにゃ🐾</h1>
h1 {
  font-size: 70px;
  font-family: 'Nikukyu';
  font-weight: 100;
}
Nikukyuフォントが適用された

かわいい…😍

プロフィール画像
Yuki Takara
都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。