1. 概要
以下に、「Google」大先生の提供しているフォントを使用する方法を示します。
サンプルや公式な設置方法は「Google Fonts + 日本語早期アクセス」に掲載されています。
2. 定義の方法
「html」上で「URI」をリンクするか、スタイルシートでインポートするかによりフォントの取得を行います。
「html」に記述する場合。
<link rel="stylesheet" href="ＵＲＩ" type="text/css">
スタイルシートに記述する場合。
@import url(ＵＲＩ);
例えば、「Noto Sans JP」というフォントを使用する場合、上記でインポートして、スタイルシートに
body
{
font-family: 'Noto Sans JP';
}
と記述すれば、そのフォントが使用できます。
フォントが使用できない場合があるので、カンマで区切って横にフォントを定義することにより左側から優先的にフォントを割り当てていきます。
3. サンプル
2017年に「Google」大先生の方でフォントを増やしたようですので、ちょっとサンプルを置いてみます。
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
font-family: 'Noto Sans JP';
「Noto Sans JP」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
font-family: 'Noto Sans Japanese';
「Noto Sans Japanese」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
font-family: 'Mplus 1p';
「Mplus 1p」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
font-family: 'Rounded Mplus 1c';
「Rounded Mplus 1c」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
font-family: 'Hannari';
「Hannari」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
font-family: 'Kokoro';
「Kokoro」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/nikukyu.css);
font-family: 'Nikukyu';
「Nikukyu」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/nicomoji.css);
font-family: 'Nico Moji';
「Nico Moji」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
font-family: 'Sawarabi Gothic';
「Sawarabi Gothic」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
font-family: 'Sawarabi Mincho';
「Sawarabi Mincho」は、こんな文字です。
１２３４５６７８９０←全角１０文字
12345678901234567890←半角２０文字
うむぅ。半角2文字あたり全角1文字のフォントが欲しいのですが・・・。
なんか、わたしのブラウザでは、文字の色が薄いし・・・。
