12.1　WEB フォントとは

12.2　定義の方法

12.3　サンプル

12.1　WEB フォントとは

　詳細は「ウィキペディア」をご覧ください。

　要は、クライアント側のマシンにインストールされていないフォントでもコンテンツ側で提供して見せ方を統一できるようにしているフォントです。

　1995年以前には想像もできなかったくらいにメモリが大量になり、ネットワークの通信速度があがったことによって実現している機能です。

　このサイトもその恩恵にあずかっています。
　Google 大先生の提供しているフォントを使用しています。

12.2　定義の方法

　html 上で URI をリンクするか、スタイルシートでインポートするかによりフォントの取得を行います。

　html に記述する場合


<link rel="stylesheet" href="ＵＲＩ" type="text/css">


　スタイルシートに記述する場合


@import url(ＵＲＩ);


　例えば、Noto Sans JP というフォントを使用する場合、上記でインポートして、スタイルシートに


body
{
	font-family: 'Noto Sans JP';
}


　と記述すれば、そのフォントが使用できます。
　フォントが使用できない場合があるので、カンマで区切って横にフォントを定義することにより左側から優先的にフォントを割り当てていきます。

12.3　サンプル

　2017年に Google 大先生の方でフォントを増やしたようですので、ちょっとサンプルを置いてみます。



@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

font-family: 'Noto Sans JP';


　「Noto Sans JP」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

font-family: 'Noto Sans Japanese';


　「Noto Sans Japanese」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);

font-family: 'Mplus 1p';


　「Mplus 1p」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

font-family: 'Rounded Mplus 1c';


　「Rounded Mplus 1c」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/hannari.css);

font-family: 'Hannari';


　「Hannari」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);

font-family: 'Kokoro';


　「Kokoro」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/nikukyu.css);

font-family: 'Nikukyu';


　「Nikukyu」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/nicomoji.css);

font-family: 'Nico Moji';


　「Nico Moji」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

font-family: 'Sawarabi Gothic';


　「Sawarabi Gothic」は、こんな文字です。



@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

font-family: 'Sawarabi Mincho';


　「Sawarabi Mincho」は、こんな文字です。