フォントをサーバー上に置く
以前ウェブフォントの使い方について紹介させて頂きましたが、今回は自分のサーバー上にダウンロードしたフォントをアップし、使用する方法です。おおまかな流れは
→フォントをダウンロード
→形式をWOFFに変換する
→サーバーにアップロード
→CSSでフォント設定
→使いたい部分でフォント指定
という作業になります。
フリーフォント使用の注意点
ネットを検索するとたくさんのフリーフォントが出てきますが、フリーフォントをWEBフォントとしての利用は再配布扱いになったり、フォントの拡張子と言えばttf(TrueType)やotf(Open Type)ですが、アップするときの形式はwoffなどになるので改変にあたる可能性があります。そのため各フォントの利用規約などをよく読んでから使用しましょう。また軽量化のためにサブセット化（対象文字を第一水準に絞るという方法）をした方がよい場合もあるそうですが、サイトによって異なるようです。
フォントをダウンロード、WOFFに変換する
まずはフリーフォントなどで使いたいフォントをTTFからWOFFへ「WOFFコンバーター」「Convertio」などを使って、ttf→woff変換します。
変換後はサーバーの「wp-content/themes/テーマ名/fonts」のフォルダへアップします。
CSSにフォントを読み込むコードを書く
次のようにフォント名やURLをアップロードしたフォントの名前に変えて、「style.css」に次のようにコードを追加します。@font-face {
font-family: 'フォント名';
src: url( "フォントのURL") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}body {
font-family: '選んだフォント名', sans-serif;
}
h1, h2, h3 {
font-family: '選んだフォント名', serif;
}
まとめ
今回は自分でフォントをサーバー上にアップして使用する使い方について紹介しました。規約など気を付ける点が多かったり、ウェブフォントの方が更新も自動など扱いやすい場合もありますが、よりこだわったフォントを使いたい場合はアップロード出来るということも知っていれば役立つと思います！
文字にこだわりたい方は是非自分好みのフォントに変えてみてください！
またおすすめフォントなどもご紹介出来たらなと思います！