Webサイトのfontを好きな書体にカスタマイズする

こんにちはスウェルデザインのｗです。

今日はWebサイト上で閲覧者の所持しているfontにかぎらず

CSSで指定した書体にする方法をメモしていきます。

これはCSS3を使った方法で、fontのデータをサーバーにアップし

画像やスプリクトファイルと同じようにパスで呼び出して使用します。

①　まずfontを用意しましょう

オススメのフリーフォントサイト

www.flopdesign.com

この時気をつけなければならないのが、商業個人共にfreeになっているfontでもライセンスによってWebでの使用が禁止されてる場合もあります。

②　ダウンロードしたotfファイルをサーバーの最上部に保存

fontなどの名前をつけたフォルダに入れましょう。

③　CSSに記述

See the Pen dYWjro by swelldesign (@w-swelldesign) on CodePen.

今回はh1に指定しましたが、あとはfont-familyで指定したいフォント名を記述して完了です。

正しくパスの指定がされていて、otfファイルがアップロードされていれば表示されるはずです。

他にもWebフォントでfontを変える方法もあるので、ページのロード時間などを気にする方はそちらでの検討もおすすめします。