①Saitamaarの場合
まず、CSS内に
@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.tokyo/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.tokyo/fonts/Saitamaar.woff2') format('woff2'),
url('http://keage.tokyo/fonts/Saitamaar.woff') format('woff'),
url('http://keage.tokyo/fonts/Saitamaar.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
と記入してください。※3
その後「AAを表示する範囲の要素(タグorクラス)」のfont-familyの先頭に'Saitamaar'を追加します。※2
例)
AA表示範囲要素{
font-family: 'Saitamaar', 'MS Pゴシック', 'MS PGothic', sans-serif;
これで導入完了です。
②「textar」「RobotoJAA」の場合
まず、
textarRobotoJAA のリンクから、フォントファイル(ttfファイル)を入手してください。
フォントファイルが複数ある場合、同梱してあるReadme.txtを読んで、好きなものを選んでください。
ファイルを入手したら、当該ファイルを任意の場所にアップロードし、そこのパスを覚えておきます。
※ルートディレクトリに「fonts」という名前のフォルダを作り、その中にアップすることをオススメします。
ちなみに、その場合のパスは「 /fonts/textar.ttf 」です(※textarフォントの場合)。
次に、CSS内に
@font-face{
font-family: 'textar';
src: url('ファイルのパス');
}
と記入してください。 ※「ファイルのパス」は先程覚えたフォントファイルのパス
その後「AAを表示する範囲の要素(タグorクラス)」のfont-familyの先頭に'textar'を追加します。※1※2
例)
AA表示範囲要素{
font-family: 'textar', 'MS Pゴシック', 'MS PGothic', sans-serif;
これで導入完了です。
※1 「RobotoJAA」の場合は、上記「'textar'」のところを「'RobotoJAA'」に変えてください。
ここの名称は任意に変更可能ですが、@font-face内とAA表示範囲要素内で同一のものにしてください。
※2 自身のサイトの「AAを表示する範囲の要素(タグorクラス)」が分からない場合、
CSS内で「font-family:'MS Pゴシック'」を探せば、恐らくそれです。
Saitamaar.jsを導入することによっても解決可能ですが、ラグが発生します。
※3 SSL(https)サイトの場合、自分でフォントを入手し、②の方法を利用する必要があります。