デフォルトのフォントの確認
私はLaravel breezeを使用しており、TailwindCSSで装飾をしているため、フォントはapp.blade.phpのクラス名に書かれています。
app.blade.php
<body class="font-sans">
...
</body>
tailwindCSSの設定ファイルであるtailwind.config.jsには以下のように記述されています。
tailwind.config.js
fontFamily: {
'sans': ["Figtree", ...defaultTheme.fontFamily.sans],
},
これは、sansという名前のフォントファミリーに新しいフォント「Figtree」を追加し、Tailwind CSSのデフォルトのサンセリフフォント（defaultTheme.fontFamily.sans）も引き続き使うという設定のようです。
公式ドキュメントによると、デフォルトのサンセリフフォントは以下のように指定されています。
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
これでデフォルトのフォントが確認できました。
フォントの選択
Google Fontsで使用するフォントを選びます。
今回は、h1タグのタイトルとボディでフォントを変えて2種類のフォントを使いたいと思います。
Google Fontsでフォントの選択をした後、Get embed codeでコードを取得します。
まずHTML用のコードをコピーしてapp.blade.phpのheadタグにペーストします。
app.blade.php
<head>
<!-- 追記 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Concert+One&family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap" rel="stylesheet" />
</head>
CSSについてはtalilwindCSSを用いているため、tailwind.config.jsにてフォントファミリーを設定します。
tailwind.config.js
fontFamily: {
'sans': ["Figtree", ...defaultTheme.fontFamily.sans],
// 追記
'title': ['"Concert One"', 'sans-serif'],
'body': ['"M PLUS Rounded 1c"', 'sans-serif'],
},
あとはフォントを反映させたいところにクラス名を記述します。
<h1 class="font-title">タイトル</h1>
<main class="font-body"></main>
これでフォントの変更ができました。
Google FontsのCSSのコードではfont-weightやfont-styleも指定していましたが。今回はこれらについてはデフォルト値を採用するため指定していません。