Google Fonts


<p>最近Next.jsでWEBフォントを使いたい場面があり、Google Fontsを読み込んで表示する実装をしました。</p>



<p>今回は、そのNext.jsでGoogle Fontsにあるフォントを利用するための方法をまとめていきます。</p>



<p>【参考】<a href="https://nextjs.org/docs/basic-features/font-optimization">Basic Features: Font Optimization | Next.js</a></p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#1nextfont">手順1）@next/fontをインストールする</a></li><li><a href="#2Google_Fonts">手順2）Google Fontsを探す</a></li><li><a href="#3NextjsGoogle_Fonts">手順3）Next.jsでGoogle Fontsを読み込む</a><ul><li><a href="#_apptsxGoogleFonts">「_app.tsx」でGoogleFontsをインポートする</a></li><li><a href="#CSSfont-family">CSSのfont-familyで指定する</a></li></ul></li></ul></div>
<h2><span id="1nextfont">手順1）@next/fontをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm i @next/font</code></pre></div>



<h2><span id="2Google_Fonts">手順2）Google Fontsを探す</span></h2>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/image-18-1024x562.png" alt="" class="wp-image-3325" width="512" height="281" srcset="https://craft-time.jp/wp-content/uploads/2023/01/image-18-1024x562.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/image-18-300x165.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/image-18-768x422.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/image-18-304x167.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/image-18-282x155.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/image-18.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>「<a href="https://fonts.google.com/">Google Fonts</a>」のサイトにアクセスして、使いたいフォントを検索して探していきます。</p>



<p>（今回は「DotGothic16」というフォントを使用してみます。）</p>



<h2><span id="3NextjsGoogle_Fonts">手順3）Next.jsでGoogle Fontsを読み込む</span></h2>



<h3><span id="_apptsxGoogleFonts">「_app.tsx」でGoogleFontsをインポートする</span></h3>



<p>先ほど選んだフォントを<code>_app.tsx</code>でimportして読み込んでいきます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-file="_app.js" data-lang="JSX" data-line="3,6,7,8,9,10,11,12,17"><code>import &#39;../styles/globals.css&#39;
import type {AppProps} from &#39;next/app&#39;
import {DotGothic16} from &quot;@next/font/google&quot;;


// Google Fonts読み込み
const dot = DotGothic16({
	weight: &quot;400&quot;,           // 1) フォントの太さを指定
	subsets: [&#39;latin&#39;],      // 2) 使用する文字セットを指定
	variable: &#39;--font-dots&#39;, // 3) CSSで使用する変数名を指定
	preload: false,          // 4) false:読み込みを遅らせる
})

function MyApp({Component, pageProps}: AppProps) {
	return (
		&lt;&gt;
			&lt;style jsx global&gt;{`:root {--font-dots: ${dot.style.fontFamily};}`}&lt;/style&gt;
			&lt;Component {...pageProps} /&gt;
		&lt;/&gt;
	)
}

export default MyApp
</code></pre></div>



<h3><span id="CSSfont-family">CSSのfont-familyで指定する</span></h3>



<p>使いたい部分のcssに先ほど指定したフォントを追加します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="global.css" data-lang="CSS" data-line="2"><code>body {
    font-family: var(--font-dots);
}</code></pre></div>



<p>以上で、Next.jsでGoogle Fontsを使うことができるようになります。</p>



<ul class="references">
<li><a href="https://nextjs.org/docs/basic-features/font-optimization">Basic Features: Font Optimization | Next.js</a></li>



<li><a href="https://github.com/vercel/next.js/issues/44840">https://github.com/vercel/next.js/issues/44840</a></li>



<li><a href="https://larsmagnus.co/blog/how-to-optimize-custom-fonts-with-next-font">How to optimize custom fonts with @next/font</a></li>
</ul>


「Google Fonts」の記事一覧