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

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

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

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

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

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

font-family:'Meiryo';

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

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

Webフォント設定について(HTML記述形式) | レンタルサーバーならエックスサーバー

レンタルサーバー「エックスサーバー」のご利用マニュアル｜HTML上に直接書体を指定してWebフォントを設定する「HTML記述形式」の手順を紹介しています。

www.xserver.ne.jp

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

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

@font-face {
  font-family: 'Font';
  src: local('Meiryo');
}
.font-demo2 {
  font-family:'Font';
  font-size:100%;
}

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

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

要するに

上記のように、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サイトの印象の半数を決める要素はフォントだと思います。そのフォントの変更方法くらいは必ず知っておきましょう。

また、フォントサイズの指定の仕方は様々な方法があります。以下の記事はその代表的なものをいくつか紹介しています。合わせてどうぞ。

CSSの単位のpx・em・rem・vh・vwの違いと使い方

今回は、WEBサイトを構築する際に使うCSSで使用されている文字や要素の長さや大きさの単位である「px」「pt」「em」「rem」「vw」「vh」「vmin」「vmax」「%」などの単位について、それぞれの意味と違い、そして使い方を紹介していきます。

kt-life.net

2020.07.11