font-familyの記述は欧文フォントからね。凡ミス経験あり😅

あれ？フォントがあたってない？
CSSには書いてあるのに…

って経験ありませんでしたか？
僕はありました😅

font-family の書き方が悪かったんです。
キホンの「キ」なので書き残しておきます。

font-familyの基本的な書き方

font-family は、欧文→和文→総称の順に書く

フォントは font-family に記述した値の順にあたっていきます。
最初に書いたフォントが見つからなければ、次に書いたフォント、無ければ次と言う感じです。

欧文フォントを先に書く理由は、日本語用が含まれてないから。

欧文フォントには日本語用が含まれてないのが一般的で、和文には適用されません。
和文フォントには英数字用も含まれてるので、欧文に対しても適用されます。

欧文フォント→和文フォントの順に書いた場合、アルファベットなどの英数字に対しては欧文フォントが適用され、日本語文字に対しては和文フォントが適用されます。

逆に、和文フォント→欧文フォントの順に書いた場合、アルファベットなどの英数字に対しても和文フォントが適用されてしまい、意図した欧文フォントとは違う表示になってしまいます。

なので欧文フォントは和文フォントより前に書きます。

以下のコードを見ていただくとわかりやすいかなと思います。

bodyタグに、欧文フォント→和文フォント
result–2 の class に、和文フォント→欧文フォント
の順に記述してますので違いを見てみてください。

<p class="result">
  <span class="cb">CodeBegin</span> は終わったけど<br>
  <span class="cb cb-second">CodeBegin</span> の繋がりは続きます
</p>

<p class="result result--2">
  <span class="cb">CodeBegin</span> は終わったけど<br>
  <span class="cb cb-second">CodeBegin</span> の繋がりは続きます
</p>

body {
  font-family: "Futura", "Century Gothic", "YuGothic", "Meiryo", sans-serif;
}

.result--2 {
  font-family: "YuGothic", "Meiryo", "Futura", "Century Gothic", sans-serif;
}

.result {
  padding: 30px 10px;
  text-align: center;
  background-color: #e4efff;
  color: #333;
  line-height: 1.2;
}

.cb {
  font-size: 32px;
}

.cb-second {
  font-weight: bold;
}

See the Pen font-family 記述の基本 by 中村勇介 (@dmqbvmzq-the-styleful) on CodePen.

上段は、欧文フォントと和文フォントが適用されています。
下段は、全文に和文フォントが適用されています。

以上が基本的なフォントのあたり方の説明でした。

font-familyのバランスを意識した書き方

フォントで雰囲気や印象がガラッと変わる

そのページをを開いた時に、パッ！と目に入ってくる印象でなんとなく雰囲気を感じますよね。
堅めの会社っぽかったり、清潔感のあるクリニックだったり、おしゃれな美容室だったり。

これはデザイナーさんの凄さですが、デザイン・配色・フォントの総合的な構成で雰囲気を表現されるので、スタイリッシュだったりダイナミックだったりとインパクトのあるフォントが使われる事もあります。
僕には到底真似できませんが😅

パッ！と目に入ってくる印象的な部分としては、具体的にはファーストビュー、ヘッダーナビ、各セクションのタイトルや見出しなどですね。

ただこれらは全体の文字数からすると比較的少ない部分です。
前述した基本的な書き方でいくと、他の多くの文章の中の英数字にも見出しなどと同じフォントが適用されてしまいます。

コーダーの目線としては、デザインを忠実に再現するためにフォントをどう効率よくあてるかを考えます。

文章のフォントは読みやすさを重視

サイトの印象や雰囲気をつくるインパクトのあるフォントの場合、文章の中のアルファベットや数字のバランスが悪くなったり読みにくくなることもあります。
例えば文章内の英数字、日付とか。

実務的な書き方としては、
ベースフォントを日本語フォントにし、
サイトタイトルやセクションタイトル、ナビゲーションには特定のタグやクラスを使って欧文フォントを指定します。

Sassで変数としておけば効率も良いですね。

デバイスを意識して Mac用→Win用 の順に書く

MacにMicrosoft Officeを入れるとWindowsフォントもインストールされるようなので、Mac用のフォントから先に書けば、Officeの有無に左右されずにデバイスに応じたフォントで表示されます。

Mac用欧→Win用欧→Mac用和→Win用和→総称
の順に書くとイイと思います。

間違ってたら教えてくれると助かります。