フォントのこだわり

この記事は Next.js 版の内容です。現在は Astro で構築し直して、カスタムフォントは廃止しました。当時のリポジトリはこちらにあるので参考にしてください。

この Web サイトで使用している 5 種類のフォントについて書き連ねていく。フォントを変えるだけでサイトの雰囲気は大きく変わるため、選ぶのはとても楽しかった。

ただ、フォントはあくまでもコンテンツを引き立てる役割なので、あまり派手なフォントは選ばずにベーシックなものをチョイスした。

Noto Sans JP

Noto Sans Japanese - Google Fonts Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language

fonts.google.com

Google Fonts で日本語フォントを選ぶとなったらまず第一候補に上がるのが Noto Sans JP である。文字のバランスが素晴らしく、非の打ち所がない。逆に言えば、いろんなサイトで使われているので個性に欠ける点がデメリットではある。

No more tofu から Noto と命名されたらしく、□（確かに豆腐に見える）はもうない = 全ての文字を網羅しているため、安心感があるのも大きい。

また、英数字も綺麗に表示されるため、このフォントだけでも十分なくらいだ。そのため、フォント名を明示的に指定しなければ Noto Sans JP が使われる設定にしてある。

Inter

Inter - Google Fonts Inter is a variable font family carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-

fonts.google.com

英字フォントで一番好きなフォントが Inter。フォントを小さくしても可読性が高いのが特徴である。小さくコンパクトなデザインが好きな私にとっては非常に扱いやすい。

このサイトでは英数字であることが確定している箇所で使用している。例えば、公開日時とかフッターのコピーライトとか。

ちなみに Noto Sans JP と意外に似ているので注意して見ないとわからないかも。

Newsreader

Newsreader - Google Fonts NewsReader is an original typeface designed by Production Type, primarily intended for continuous on-screen reading in content-rich environments. To contribute,

fonts.google.com

このサイトではほとんど使っていないが、セリフ体を指定した場合に表示されるフォントである。イタリックにするとカッコ良いので使う機会がないか伺っているところだ。

JetBrains Mono

JetBrains Mono - Google Fonts JetBrains Mono is a typeface made for the specific needs of developers. Find more informations about font features, design and language support on www.jetbrains

fonts.google.com

普段から JetBrains製の IDE を愛用している。このサイトの開発であれば TypeScript がメインなので WebStormといった具合に。

そんな JetBrains がオープンソースとして開発した等幅フォントが JetBrains Monoである。開発者には嬉しい特徴が満載なので、好みはあると思うがかなりおすすめ。

特徴的なのはリガチャ（合字）に対応していることだ。例えば =/= は =/= になり、=> は => になる。初めて見る人は混乱するだろうが、慣れれば見やすいと思う。

このサイトでは JetBrains Mono をコードブロックやインラインコードで使用している。

Noto Emoji

Noto Emoji - Google Fonts Noto Emoji is an open source font that has you covered for all your emoji needs, including support for the latest Unicode emoji specification. It has multiple w

fonts.google.com

記事のアイキャッチには絵文字を使用している。そのままではポップ過ぎてこのサイトのモノクロなイメージに合わないので、良い感じの絵文字がないか探していたときに見つけたのが Noto Emoji である。

ただ、Safari や iOS で見た場合になぜかフォントが反映されない。代わりに Apple デフォルトの絵文字を表示させるようにしている。原因は調査中。早いうちに解決したい。

20240519 追記

こちらの記事に解決方法を記載。

Next.js と Tailwind で使う

Next.js というフレームワークでこのサイトは作られているが、Next.js には Font Optimizationという機能がある。

この機能を使うことでビルド時にフォントファイルをダウンロードし、他の静的アセットとともにホストできる。そうすることでユーザが Web サイトにアクセスしたときに、パフォーマンスに影響を与えるような、フォントに対する追加のネットワーク要求を行わない。

また、読み込み時のフォントのずれを防止してくれるので、CLSの低下も見込める。

簡単に導入方法を説明する。

まずは使用するフォントを定義する。何個でもカスタムフォントを定義できるが、使えば使うほどパフォーマンスが落ちるため注意。

1
import { Inter, JetBrains_Mono, Newsreader, Noto_Emoji, Noto_Sans_JP } from 'next/font/google';
2

3
export const notoSansJP = Noto_Sans_JP({
4
  subsets: ['latin'],
5
  display: 'swap',
6
  weight: ['400', '500'],
7
});
8

9
export const inter = Inter({ subsets: ['latin'], weight: ['400', '500'], display: 'swap', variable: '--font-inter' });
10

11
export const newsreader = Newsreader({
12
  subsets: ['latin'],
13
  display: 'swap',
14
  weight: ['400'],
15
  style: 'italic',
16
  variable: '--font-newsreader',
17
});
18

19
export const jetBrainsMono = JetBrains_Mono({
20
  subsets: ['latin'],
21
  display: 'swap',
22
  weight: ['400'],
23
  style: 'normal',
24
  variable: '--font-jetbrains-mono',
25
});
26

27
export const notoEmoji = Noto_Emoji({
28
  subsets: ['emoji'],
29
  display: 'swap',
30
  weight: '600',
31
  style: 'normal',
32
  variable: '--font-noto-emoji',
33
});

variable を設定すると CSS 変数として利用できる。

次に <html> 要素にフォントを追加する。そうすることでサイト全体に反映される。

1
import { inter, jetBrainsMono, newsreader, notoEmoji, notoSansJP } from '#/lib/nextjs/fonts';
2

3
const RootLayout = ({ children }: { children: React.ReactNode }) => (
4
  <html
5
    className={`${notoSansJP.className} ${inter.variable} ${newsreader.variable} ${jetBrainsMono.variable} ${notoEmoji.variable}`}
6
  >
7
    ...
8
  </html>
9
)

プライマリフォントである Noto Sans JP だけ className を呼び出していることに注意。それ以外は先ほど設定した variable（CSS 変数）を指定する。

最後に Tailwind CSS の設定を行う。

1
import type { Config } from 'tailwindcss';
2
import defaultTheme from 'tailwindcss/defaultTheme';
3

4
export default {
5
  theme: {
6
    extend: {
7
      fontFamily: {
8
        sans: ['var(--font-inter)', ...defaultTheme.fontFamily.sans],
9
        serif: ['var(--font-newsreader)', ...defaultTheme.fontFamily.serif],
10
        mono: ['var(--font-jetbrains-mono)', ...defaultTheme.fontFamily.mono],
11
        emoji: ['var(--font-noto-emoji)', 'Apple Color Emoji'],
12
      },
13
    },
14
  },
15
} satisfies Config;

もしカスタムフォントの読み込みに失敗したときのために Tailwind CSS のデフォルトフォントを設定しておく。これでフォントの設定は完了した。

個別にフォントを呼び出したいときは以下のように className を指定するだけで良い。

<p className='font-mono'>Whereas disregard and contempt for human rights have resulted.</p>

フォントについては以上になる。他にも知らないフォントが数えきれないほどあるので、ビビッときたフォントがあれば衝動的に変えるかもしれない。そのときは追記する。

フォントのこだわり

Noto Sans JP

Inter

Newsreader

JetBrains Mono

Noto Emoji

20240519 追記

Next.js と Tailwind で使う

最後までお読みいただき、ありがとうございます