EmDash日本語ガイド
記事一覧

EmDashで日本語フォントを使う｜Noto Sans JPへの切り替え

EmDashのブログ雛形の本文フォントは英語用の Inter です。astro.config.mjs の数行を書き換えて Noto Sans JP にした手順と、あわせて直した「html lang」と日付の表示を説明します。

EmDash日本語ガイド 編集部

約2分で読めます

EmDashで日本語フォントを使う｜Noto Sans JPへの切り替え
書いた人
  • EmDash日本語ガイド 編集部
公開日
読む時間
約2分

EmDash のブログ雛形は、本文の文字に Inter（英語用のフォント）を使っています。日本語の文字は Inter に含まれていないので、端末にある別のフォントで表示され、見た目が端末ごとにばらばらになります。このサイトでは Noto Sans JP に切り替えました。

フォントは astro.config.mjs で読み込んでいる

雛形の astro.config.mjs には、fonts という設定があります。編集部が書き換えた後の形は次のとおりです。

fonts: [
	{
		provider: fontProviders.google(),
		name: "Noto Sans JP",
		cssVariable: "--font-body",
		weights: [400, 500, 700],
		fallbacks: ["sans-serif"],
	},
	{
		provider: fontProviders.google(),
		name: "JetBrains Mono",
		cssVariable: "--font-mono",
		weights: [400, 500],
		fallbacks: ["monospace"],
	},
],

変えたのは1つ目だけです。

  • name を "Inter" から "Noto Sans JP" へ
  • weights（太さ）を [400, 500, 600, 700] から [400, 500, 700] へ

日本語フォントは1つの太さでもファイルが大きいので、使っていない太さは減らしました。2つ目の JetBrains Mono はコードの表示用で、英数字だけなので残しています。

cssVariable: "--font-body" が、本文のフォントを決める変数です。src/styles/tokens.css は見出しのフォント（--font-heading）も初期値で --font-body を使うので、ここを変えるだけで見出しも日本語フォントになります。

html の lang を日本語にする

フォントと一緒に、ページの言語の設定も直しました。astro.config.mjs の設定の中に、次の1行を足しています。

i18n: { defaultLocale: "ja", locales: ["ja"] },

これでページの言語が日本語として扱われます。ブラウザの読み上げや、検索エンジンがページの言語を判断するときに使われる設定です。

書き換えた後に確かめること

設定を変えたら、ビルドして表示を見ます。

npm run build

編集部の環境では、最初の npm create がインストールの途中で止まっていたため、このビルドが部品の不足で失敗しました。そのときは node_modules を消して npm install をやり直すと通りました（create-emdash の手順）。

関連記事

続けて読む

記事一覧