<p data-line="1" class="code-line">Astro.jsでWebフォント(NotoSansJP)を使ってみたのでメモ。</p>
<h2 id="web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E8%BF%BD%E5%8A%A0%E6%96%B9%E6%B3%95" data-line="3" class="code-line"><a class="header-anchor-link" href="#web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E8%BF%BD%E5%8A%A0%E6%96%B9%E6%B3%95" aria-hidden="true"></a> WEBフォントの追加方法</h2>
<p data-line="4" class="code-line">Astroには、Webフォントを追加するための3つの方法があります。</p>
<ol data-line="5" class="code-line">
<li data-line="5" class="code-line">CDNを使用する</li>
<li data-line="6" class="code-line">ローカルフォントを使用する</li>
<li data-line="7" class="code-line">Fontsourceを使用する</li>
</ol>
<p data-line="9" class="code-line">以下の表に、各方法のメリットとデメリットをまとめました。</p>
<table data-line="11" class="code-line">
<thead data-line="11" class="code-line">
<tr data-line="11" class="code-line">
<th>方法</th>
<th>メリット</th>
<th>デメリット</th>
</tr>
</thead>
<tbody data-line="13" class="code-line">
<tr data-line="13" class="code-line">
<td>CDN</td>
<td>- 簡単に導入できる<br />- キャッシュ効果で読み込みが早い</td>
<td>- 外部依存のため、接続が不安定な場合がある<br />- プライバシーに懸念がある場合がある</td>
</tr>
<tr data-line="14" class="code-line">
<td>ローカル</td>
<td>- 外部依存なしで安定した表示<br />- プライバシー保護</td>
<td>- フォントファイルの管理が必要<br />- 初回読み込みが遅くなる可能性がある</td>
</tr>
<tr data-line="15" class="code-line">
<td>Fontsource</td>
<td>- 簡単に管理できる<br />- 必要なフォントだけを選択可能</td>
<td>- npmパッケージのインストールが必要<br />- プロジェクトのサイズが増加する可能性がある</td>
</tr>
</tbody>
</table>
<p data-line="17" class="code-line">基本的には、<strong>Fontsourceを使用する方法</strong>がおすすめです。</p>
<p data-line="19" class="code-line">理由は以下の通りです。</p>
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">簡単な管理: Fontsourceを使用すると、必要なフォントだけを選択してインストールできるため、プロジェクトが軽量になります。</li>
<li data-line="21" class="code-line">安定性: ローカルにフォントを持つことで、外部依存がなく、常に同じフォントが表示されます。</li>
<li data-line="22" class="code-line">カスタマイズ性: フォントのスタイルやウェイトを細かく制御できるため、デザインの自由度が高まります。</li>
</ul>
<p data-line="24" class="code-line">Fontsourceにないフォントを使用する場合以外は、Fontsourceを使用することをおすすめします。</p>
<h2 id="%E6%96%B9%E6%B3%953%3A-fontsource%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B" data-line="26" class="code-line"><a class="header-anchor-link" href="#%E6%96%B9%E6%B3%953%3A-fontsource%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B" aria-hidden="true"></a> 方法3: Fontsourceを使用する</h2>
<p data-line="28" class="code-line">最後に、Fontsourceを使用する方法です。Fontsourceを利用すると、簡単にWebフォントを管理できます。以下の手順でNoto Sansをインストールします。</p>
<h3 id="fontsource%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="30" class="code-line"><a class="header-anchor-link" href="#fontsource%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Fontsourceをインストール</h3>
<p data-line="31" class="code-line">Fontsourceのサイトにアクセスして検索欄に"noto sans"と入力します。</p>
<p data-line="33" class="code-line">下に検索結果が出てくるのでNoto Sans JPをクリックします。<br />
<a href="https://gyazo.com/5ae7f0e52197eb3a19f1c5959743403b" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/5ae7f0e52197eb3a19f1c5959743403b.png" alt="Image from Gyazo" /></a></p>
<p data-line="36" class="code-line">右上の「Install」タブをクリックします。<br />
<a href="https://gyazo.com/f45cfb22572dfdaf5e17417eaedb5d67" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/f45cfb22572dfdaf5e17417eaedb5d67.png" alt="Image from Gyazo" /></a></p>
<p data-line="39" class="code-line">すると利用手順が書かれているので、それに従ってインストールします。</p>
<p data-line="41" class="code-line">Noto Sans JPをインストールする場合の手順は下記です。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="43"><span class="token function">pnpm</span> <span class="token function">add</span> @fontsource-variable/noto-sans-jp
</code></pre></div><aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content"><p data-line="48" class="code-line">他のパッケージの場合:<br />
npm: <code>npm install @fontsource-variable/noto-sans-jp</code><br />
yarn: <code>yarn add @fontsource-variable/noto-sans-jp</code><br />
bun: <code>bun add @fontsource-variable/noto-sans-jp</code></p>
</div></aside>
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B" data-line="54" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B" aria-hidden="true"></a> フォントを使用する</h3>
<p data-line="56" class="code-line">使用したいコンポーネントでフォントをインポートします。</p>
<p data-line="58" class="code-line">私は全てに適用したかったので共通のレイアウトコンポーネントとglobal.cssに追加しました。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">layout.astro</span></div><pre class="language-astro"><code class="language-astro code-line" data-line="60">---
import '@fontsource-variable/noto-sans-jp';
---
</code></pre></div><div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">global.css</span></div><pre class="language-css"><code class="language-css code-line" data-line="66"><span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Noto Sans JP Variable'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="tailwind-css%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E5%A0%B4%E5%90%88" data-line="72" class="code-line"><a class="header-anchor-link" href="#tailwind-css%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"></a> Tailwind CSSを使用している場合</h4>
<p data-line="73" class="code-line">Tailwind CSSを使用している場合は、<code>global.css</code>の@themeにフォントを追加します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">global.css</span></div><pre class="language-css"><code class="language-css code-line" data-line="75"><span class="token atrule"><span class="token rule">@theme</span></span> <span class="token punctuation">{</span>
  <span class="token variable">--font-sans</span><span class="token punctuation">:</span> <span class="token string">'Noto Sans JP Variables'</span><span class="token punctuation">,</span> <span class="token string">'sans-serif'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B" data-line="81" class="code-line"><a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B" aria-hidden="true"></a> ローカルフォントを使用する</h2>
<p data-line="82" class="code-line">Fontsourceに使いたいフォントがない場合は、ローカルフォントを使用しましょう。</p>
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" data-line="84" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> フォントファイルのダウンロード</h3>
<p data-line="85" class="code-line">フォントファイルをダウンロードします。</p>
<p data-line="87" class="code-line">Noto Sans JPを使用する場合の手順を説明します。</p>
<ol data-line="89" class="code-line">
<li data-line="89" class="code-line"><a href="https://fonts.google.com/" target="_blank" rel="nofollow noopener noreferrer">Google Fonts</a>にアクセスします。</li>
<li data-line="90" class="code-line">検索バーに"Noto Sans"と入力します。</li>
<li data-line="91" class="code-line">フォントファミリーを選択し、"Select this style"をクリックします。</li>
<li data-line="92" class="code-line">"Customize"をクリックして、必要なスタイルを選択します。</li>
<li data-line="93" class="code-line">"Download"をクリックして、フォントファイルをダウンロードします。</li>
</ol>
<h3 id="%E9%80%9F%E5%BA%A6%E3%82%92%E8%80%83%E6%85%AE%E3%81%97%E3%81%9F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E9%81%B8%E6%8A%9E" data-line="95" class="code-line"><a class="header-anchor-link" href="#%E9%80%9F%E5%BA%A6%E3%82%92%E8%80%83%E6%85%AE%E3%81%97%E3%81%9F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 速度を考慮したフォントの選択</h3>
<p data-line="96" class="code-line">フォントファイルには形式があるため、速度が遅くなる可能性があります。</p>
<ul data-line="98" class="code-line">
<li data-line="98" class="code-line">WOFF2: 圧縮されたWebフォントファイル。最も速度が速い。</li>
<li data-line="99" class="code-line">WOFF: Webフォントファイル。速度が速い。</li>
<li data-line="100" class="code-line">TTF: TrueTypeフォントファイル。速度が遅い。</li>
</ul>
<p data-line="102" class="code-line">他にも形式がありますが、よく使われるのは上記の3つです。</p>
<p data-line="104" class="code-line">WOFF2形式のフォントファイルを使用することをお勧めします。</p>
<p data-line="106" class="code-line">NotoSansJPのWOFF2形式のフォントファイルは、以下のリンクからダウンロードできます。</p>
<p data-line="108" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://github.com/ixkaito/NotoSansJP-subset/tree/master/subset" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E9%85%8D%E7%BD%AE" data-line="110" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E9%85%8D%E7%BD%AE" aria-hidden="true"></a> フォントファイルの配置</h3>
<p data-line="112" class="code-line">プロジェクトの<code>public/fonts/</code>ディレクトリに保存します。</p>
<p data-line="114" class="code-line">例えば、<code>NotoSansJP-Regular.woff2</code>と<code>NotoSansJP-Bold.woff2</code>を用意します。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="116">public/
└── fonts/
    ├── NotoSansJG-Regular.woff2
    └── NotoSans-Bold.woff2
</code></pre></div><p data-line="123" class="code-line">次に、CSSで<code>@font-face</code>を使用してフォントを登録します。</p>
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="125"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Noto Sans JP'</span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'/fonts/NotoSansJP-Regular.woff2'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Noto Sans JP'</span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'/fonts/NotoSansJP-Bold.woff2'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p data-line="141" class="code-line">これで、Noto Sansフォントを使用する準備が整いました。</p>
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B-1" data-line="143" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B-1" aria-hidden="true"></a> フォントを使用する</h3>
<p data-line="144" class="code-line">例えば、全てのページでNoto Sans JPを使用したい場合は、<code>global.css</code>のbodyにフォントを適用します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">global.css</span></div><pre class="language-css"><code class="language-css code-line" data-line="146"><span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Noto Sans JP'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="tailwind-css%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E5%A0%B4%E5%90%88-1" data-line="152" class="code-line"><a class="header-anchor-link" href="#tailwind-css%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E5%A0%B4%E5%90%88-1" aria-hidden="true"></a> Tailwind CSSを使用している場合</h4>
<p data-line="153" class="code-line">Tailwind CSSを使用している場合は、<code>global.css</code>の@themeにフォントを追加します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">global.css</span></div><pre class="language-css"><code class="language-css code-line" data-line="155"><span class="token atrule"><span class="token rule">@theme</span></span> <span class="token punctuation">{</span>
  <span class="token variable">--font-sans</span><span class="token punctuation">:</span> <span class="token string">'Noto Sans JP'</span><span class="token punctuation">,</span> <span class="token string">'sans-serif'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="%E5%8F%82%E8%80%83" data-line="161" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul data-line="162" class="code-line">
<li data-line="162" class="code-line"><a href="https://docs.astro.build/ja/guides/fonts/" target="_blank" rel="nofollow noopener noreferrer">https://docs.astro.build/ja/guides/fonts/</a></li>
<li data-line="163" class="code-line"><a href="https://qiita.com/wwwy/items/7f55eccbe23272180c26" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/wwwy/items/7f55eccbe23272180c26</a></li>
<li data-line="164" class="code-line"><a href="https://qiita.com/tanimoto-hikari/items/fea59595f1202d5761a4" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/tanimoto-hikari/items/fea59595f1202d5761a4</a></li>
<li data-line="165" class="code-line"><a href="https://arcuss-service.com/knowledge/astro-font.html" target="_blank" rel="nofollow noopener noreferrer">https://arcuss-service.com/knowledge/astro-font.html</a></li>
</ul>


Astro.jsでWebフォント(NotoSansJP)を使う方法