WEBサイトのフォントの指定を変更する方法

HTML/CSS

今回は、WEBサイトに表示されているテキストのフォントを好きなものに変更する方法を紹介します。

WEBサイトに表示されているフォントはサーバーから読み込むWEBフォントと言われるものと、端末(ブラウザ)が読み込むローカルフォントがあります。基本的には、端末から読み込むものがデフォルトですが、WEBフォントの設定をしたサイトの場合はWEBフォントを読み込みます。(現在はwebサーバーから読み込むものが大半でしょう。)

WEBサイトのフォントを変更する方法

フォントは、WEBフォントもしくはローカルから読み込みたいフォント名をスタイルシートに記述していきます。WEBフォントの場合は初めに読み込むフォントのデータをサーバーに用意します。

実際の記述の下記のような感じです。下記の記述は「Meiryo」を指定しています。別のフォントにしたい場合は「Meiryo」部分を書き換えます。(ただしそのフォントがフォントブックもしくはサーバーに存在していることが条件です。)

font-family:'Meiryo';

WEBフォントを使用したい場合はサーバーのサービスを使用します。そこで用意されているフォントを上記のCSSで呼び出します。例えば、エックスサーバーの場合は下記のWEBフォントをONにします。

細かい設定方法は、下記の様に各サービスから設定方法に関するマニュアルが用意されています。その指示の通りに作業すればOKです。

https://www.xserver.ne.jp/manual/man_server_webfont_html.php

他にもWEBフォントはGoogle Fontsを代表にフォント提供サービスが存在するので、それを使用します。

また、ローカルファイルで読み込む場合は下記の様になります。

@font-face {
  font-family: 'Font';
  src: local('Meiryo');
}

.font-demo2 {
  font-family:'Font';
  font-size:100%;
}

端末毎に指定したフォントが表示されない場合

読み込み先に指定したフォントが存在しない場合は端末(ブラウザ)のデフォルト設定で指定されているフォントが読み込まれます。

要するに

  1. 端末のフォントを使用
  2. style sheetでMSゴシックを読み込む
  3. Macのフォントブックに有り
  4. 指定したフォントが読み込まれる。
  1. WEBフォントを使用
  2. style sheetでメイリオを読み込む
  3. WEBフォントには無し
  4. Macのフォントブックには有り
  5. Macのフォントブックから読み込まれる。
  1. WEBフォントを使用
  2. style sheetで小塚ゴシックを読み込む
  3. WEBフォントには無し
  4. Macのフォントブックにも無し
  5. Macのフォントブックの代用フォントであるMSゴシックが読み込まれる。

上記のように、WEBフォントに存在しないフォントは、端末のフォントに置き換わります。ただし実際のフォントは端末に保存されているものによって変わってきます。

このように指定したフォントが無かった場合に代用するフォントも指定する事が出来ます。その代用も無かった場合の代用も指定出来ます。これを無限に記述する事が出来ます。

実際の記述は下記のようになります。(先頭に記述してる’Meiryo’が最優先で使用される。)

@font-face {
font-family:'Meiryo',-apple-system,BlinkMacSystemFont,'.SFNSDisplay-Regular','Hiragino Kaku Gothic Pro','Yu Gothic','MS PGothic','Segoe UI','Verdana','Helvetica','Arial',sans-serif
}

以上が「WEBサイトのフォントの指定を変更する方法」でした。

WEBサイトの印象の半数を決める要素はフォントだと思います。そのフォントの変更方法くらいは必ず知っておきましょう。

2020年5月7日HTML/CSSCSS,WEB

Posted by KT