今日、3日前に買ったタコ🐙の存在を忘れていて、
急いでタコの炊き込みご飯を炊いた、だよしです。👩

初めましてのわたしの記事は、Webフォントについてです！

Webフォントを使用してるサイトをよく見かけるようになりましたし、
サイトやページの世界観やブランディングのためにWebフォントを使用したい、という
機会増えてますよね。

でも実際使うとなると、使い方や注意点、有料無料があるの！？など
知っておきたいことがいくつかありますのでご紹介したいと思います！

Webフォントとは

まずデバイスフォントはご存じですか？
もともと私たちの端末（Windows、macなど）にインストールされているフォントのことです！
Webページでテキストを表示する際にはCSSで指定したフォントの中に当てはまるデバイスフォントが
表示されますが、それはデバイスの種類によって差がありますね！
インストールされていないフォントは表示できませんよね＞＜

そして、今まではここを引き立たせたいとか見出しだけ特別感出したい！というときは
そのテキストも画像で作るしかなかったですよね！
それが、2010年ころからブラウザがWebフォント対応するようになって…そこからだんだんと
使われるようになりました。

意図したフォントを表示させたいときに使うのがWebフォントです！
Webフォントデータをダウンロードすることで表示させることができます。
しかし、メリットとデメリットがあるのでそこを注意しないといけません。

メリットとデメリット

メリット😃

1.デザイン性のあるフォントを利用できる

ブランディング向上や世界観を文字で表現できます。

2.フォントを統一できる

ユーザーの端末などに左右されず、誰がみても同じフォントでみえる。
私たちの意図するデザインがそのまま見てもらえます。
そして修正も画像文字と違って簡単ですよね。

3.SEOの観点では理想的

今まで端末で表現できないフォントを画像で作っていましたが
Webフォントは文字なので自動翻訳音声読み上げも対応してくれます。アクセシビリティには最適。

デメリット😅

1.ライセンス確認が必要

イラストや写真素材同様、Webフォントも有料のものがあるのでフォントを選択する際、注意が必要です。
無料だと思っていても制約や規定がありますので、Webフォントを使おう！と思ったときに事前に確認しましょう。

2.いつだって君はそうだ・IEで文字がずれる。

フォントによってIEではベースライン（底辺が接する線）がずれる場合がありますので
IEのみpaddingなどを使って位置を調整する対応が必要です。

3.Webフォントの使い方

1.CSSの＠font-faceでフォントを指定する方法

・cssで＠font-faceを記述して任意のフォント名をつけます。

 

・さらにこのフォントを利用したいプロパティに適応させます

 

2.Google Fontsから選ぶ

Googleが提供しているWebフォントサービスを使う方法
こちらはすべて無料で商用利用対応です。ライセンス確認の必要がありません。

step1.

Google Fontsで使用したいフォントを見つける

step2.

フォントのスタイルを選ぶ

step3.

フォントの詳細の設定をする。太さが選べるので使うものだけ追加しましょう

step4.

html、CSSに貼り付ける

例

html

css

 

3.無料のWebフォントサービスを使う

いくつかあります！

①.Google Font

上でご紹介したGoogle Fontsです。すべて無料、商用利用も可能です！

②.Adobe Fonts

Adobe Creative Cloudライセンスをお持ちの方であれば利用できます！
ただし再販は不可ですので、私たちのページの先のユーザーがフォントを使ったりカスタマイズできるようにしてはいけません。

③.Fonts.com

海外で有名なサイトです。無料と有料のプランがあります。

こちらは有料

④.FONTPLUS

（欧文フォント／和文フォント）
ソフトバンク・テクノロジー運営サイトです。有料ですが、書体数が多い！フォントランキングが見られるのも良い！

4.Webフォントが配信されていなくてもフォントは使えるのか

このフォントを使いたい！！けど配信されていないという場合でもあきらめないでください！🧙
商用利用可能なフリーフォントでしたら自分でWebフォントが作れます。

step1.

商用利用が出来るかを確認してください

step2.

フォントファイルをWOFFコンバータなどを使って

「.woff」、「.eot」ファイルに変換する。

step3.

CSSで@font-faceでフォント指定して設定します。

これはとても最高ですよね、ただライセンスは事前にしっかり確認しましょうね。

以上がWebフォントについてでした💫
私も自分で作る、はやっていなかったのでこれを知ったいま、今後使う機会が出てきそうです！
いくつかの注意点に気を付けながら、そしてWebフォントの使いどころを見極めて上手に使っていきたいですね！

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません