Web Fonts

(2020-04-20 加筆)

Web Fontsとは

• Webサーバー上にあるフォントファイルを参照する技術です
• Webサーバー上にフォントファイルがあるため、ユーザーの環境に影響されずにフォントを表示できます
  • 今までは、デザインとしてフォントを使用する場合は、画像として表示していましたが、文字修正や検索の点で問題がありました

メリット

• 更新が容易になり、デザインの制約が緩和されます
• 制作側ではPCにフォントをインストールするお金や手間がなくなります

デメリット

• 読み込みに時間がかかる場合があります
• 明朝体などの細い文字は、潰れる可能性が高いです
• デザイン性が求めらる、個別の文字詰めはできません
• bodyなど全体に指定すると読み込みに時間がかかるので、見出しなど装飾した一部の文字に適用した方が良いようです。

種類

• 欧文フォント
• 和文フォント
• アイコン

注意点

• ライセンス確認は必須です

代表的なWebフォントサイト

Google Fonts

fonts.google.com

• 欧文フォント
• 無料

文字の種類（メモ）

• Display：デザイン性が高い
• handwriting：筆記体、手書き文字

使用方法

Comic Neueの場合

▼

＜HTML＞
Head内に記述します

<link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">

＜CSS＞
適用したいセレクタを指定して記述

セレクタ {
  font-family: 'Comic Neue', cursive;
}

Google Fonts + Japanese

googlefonts.github.io

• 和文フォント
• 無料

Fonts.com

• 欧文フォント／和文フォント
• 無料／有料プラン

Font Squirrel

• 欧文フォント
• デザインフォント

Font Awesome Icons (アイコン)

fontawesome.com

• アイコンを画像ではなく文字のように利用できます
• バージョンは「5」ではなく「4.7.0」を利用します

使用方法

＜HTML＞
Head内に記述します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

文字の部分に続けて記述します。見やすさのためにアイコンの後ろに半角スペースを入れています。

<h3><i class="far fa-thumbs-up"></i> モンサンミシェル</h3>

＜CSS＞
CSSで文字色を指定できます。文字の大きさなども指定できます。

i {
  color: #4299f0;
}

＜例＞

フォントタイプ（Webフォントでなく）

2種類ある場合はオープンタイプを使用します

• トゥルータイプ(.otf=TrueType font):昔のフォントタイプ
• オープンタイプ(.otf=OpenType font):後発のフォントタイプ
  • 旧漢字などに対応
  • Adobe製品のCSバージョン以前だと読み込めない場合があります。

一般的なフォント

• Helvetica：読みやすい、世界の標識で使用、会社ロゴでも多い
• Futura：デザイン性が高い、QとOが丸い
• Times：英字新聞などで使用、あまりWeb向きではない
• Century：少し古い
• Optima：ゴシックにも明朝にも見える。日本人は好きな人が多い

macは書体を減らす

• Osakaは裏の部分で使用しているから消さない
• Monaco、New Yorkなど都市名はWeb用書体なので消さない
• 英語書体はあまり使用しないものは減らす

＜参考サイト＞

odnax.hatenablog.com
oxynotes.com