フォントのこだわり

この記事は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>

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