独自のフォントを使う方法

以下の手順で取得します。

1. Google Fontsにアクセスします。
2. 使用したフォントを選択し、Get Fontをクリックします。
3. Get embed codeをクリックし、Change styleで必要なスタイルを選択して、HTML、CSSを取得します。

取得した以下のコードをtmp-user/head-insert.phpに追加します。

<link href="https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&display=swap" rel="stylesheet">

取得した以下のコードをstyle.cssに追加します。

.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-style: normal;
  font-weight: 400;
}

.kaisei-decol-medium {
  font-family: "Kaisei Decol", serif;
  font-style: normal;
  font-weight: 500;
}

.kaisei-decol-bold {
  font-family: "Kaisei Decol", serif;
  font-style: normal;
  font-weight: 700;
}

以下の手順でアップロードします。

1. FTPソフトを使ってサーバーに接続します。
2. 子テーマのフォルダ内に「font」フォルダを作成します。
3. フォントファイルを作成した「font」フォルダにアップロードします。

以下のコードをstyle.cssに追加します。

@font-face {
  font-family: 'Kaisei Decol';
  font-style: normal;
  font-weight: 400;
  src: url('font/KaiseiDecol-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Kaisei Decol';
  font-style: normal;
  font-weight: 500;
  src: url('font/KaiseiDecol-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Kaisei Decol';
  font-style: normal;
  font-weight: 700;
  src: url('font/KaiseiDecol-Bold.ttf') format('truetype');
}