✏️
Nuxt3でGoogle Fontsを使用したい
はじめに
Nuxt3で開発をしていてフォントを好きなものに変えたく、やり方を調べたのでまとめておきます。
Google Fontsで使いたいフォントを探す
まずはGoogle Fontsで使いたいフォントを探します。
例えば、言語を日本語に絞り人気順に並べ替えて好みのものを探します。
遷移先を少し下に行くと太さから選べるところがあるので選択。
選択済みになると右上のアイコンを押下した時に、選択したフォントの記述方法を教えてもらえます。
<link>の最後のhrefの中身とCSS rules to specify familiesを後程使います。
<link>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap" rel="stylesheet">
CSS rules to specify families
font-family: 'Noto Sans JP', sans-serif;
Nuxt3に設定
1. nuxt.config.tsに追加
nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{
rel: "preconnect",
href: "https://fonts.googleapis.com",
},
{
rel: "stylesheet",
// TODO: ここに先ほど控えたhrefの中身を記載
href: "https://fonts.googleapis.com/css2?family=Inter&display=swap",
crossorigin: "",
},
],
},
},
})
2. vueファイルで指定
レイアウトで全体にまとめて指定しました。
layouts/default.vue
<style>
html {
// TODO: ここに先ほど控えたCSS rules to specify familiesを記載
font-family: 'Noto Sans JP', sans-serif;
}
</style>
レイアウトの作成はこちらを参考にしました。
参考
Discussion