Google Fontsのサイトで使用したいフォントを全て選択します。複数のフォントも一度に読み込めます。
Google Fonts
Embedタブの<link>を選択するとheadタグ内に貼り付け用のコードが表示されます。URL末尾のパラメータ「&display=swap」で自動的にfont-display: swap;の指定になります。Webフォントが利用可能になるまでは代替フォントで表示します。
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">Embedタブの@importを選択するとCSSファイル内に貼り付け用のコードが表示されます。
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
</style>CSSファイル内でフォントを使用したい箇所にfont-familyで指定すると、読み込んだWebフォントが表示できます。フォント名はGoogle Fontsのサイトで確認できます。font-familyは優先順位の最後にゴシック体のsans-serifか明朝体のserifを総称フォントとして指定しておきます。
.font-accent{
font-family: 'Noto Serif JP', serif;
}なお、フォントによっては太さの異なるスタイルや斜体のスタイルが用意されています。その場合、使用したいスタイルを全て読み込みます。
※「Regular 400」のスタイルのみ読み込む場合、URLにwghtの指定は付きません。
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&display=swap" rel="stylesheet">font-familyに加えfont-weightやfont-styleを指定することで表示できます。
.font-accent{
font-family: 'Noto Serif JP', serif;
font-weight: 500;
}太さの異なるスタイルや斜体のスタイルが用意されていないフォントの場合は、例えばfont-weight: bold;で太字にできます。
.font-accent{
font-family: 'Noto Serif JP', serif;
font-weight: bold;
}フォントによってはGoogleからCDN提供されていない場合があります。その場合はフォントデータをダウンロードしてサーバーにアップロードします。ただし日本語のWebフォントは特に容量が大きいため必要なウェイトのみアップロードします。
アップロードしたフォントデータはCSSファイル内で@font-faceで読み込みます。これで使用したい箇所にfont-familyで指定できます。
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url(../fonts/NotoSerifCJKjp-Regular.otf) format('opentype');
}Webフォントの読み込みはWeb Font Loader（webfont.js）を利用する方法もあります。Web Font LoaderはGoogleとTypekitが共同開発したフォントの読み込みを制御できるJavaScriptライブラリです。
