【CSSデザイン】超簡単! フォント設定方法 & Webフォント・アイコン紹介

WordPress

みなさんこんちわ、にゃーお。です^^
「フォントカスタマイズ」をテーマに前記事では、フォントのスタイルや装飾について記事にまとめました。

【CSSデザイン】これを押さえれば完璧!フォントカスタマイズの基本
今回は好きなデザインにカスタマイズしていくための基礎!フォントのカスタマイズを記事まとめました。記事のボリュームが大きくなってしまい、本記事は「その1」として、CSSによるスタイル設定を中心に紹介したいと思います。

次はフォントカスタマイズ記事の第2弾という事でフォント指定によるカスタマイズ方法とおすすめフォント&アイコンをご紹介したいと思います。

スポンサーリンク

あらためて「フォント」とは?



普段何気無く??使う事のある言葉「フォント」・・・仕事では書類を作ったりするときに気にする事があるくらいですかね、日々のSNSやネットではあまり意識して使う事は無いです。

「フォント (Font)」とはそのまま「書体」の事を言います。何かしらの書式方針(デザイン方針)に基づいた一連の文字群。
方針に基づいたデザインですので、当然デザイナーがおり、設計されたプロダクトです。つまり世界共通で皆が同じものを使っていて。。。という事は無いのです。プロダクトですので採用した書式を取り扱うメディアがあり、紙があり、ソフトウェアがあり、それによって使用されるフォントは異なるんですよね。
当たり前のようで難しい話、つまり、Webサイトで考えた場合、テキストデータを扱うOS(Windows, Mac)やアプリケーション(Microsoftの「Word」やAppleの「Pages」、メール用のアプリなど)では標準で使用されるフォントが異なるのは当然の事なんです。つまり互換性が無いのでレイアウトや表示が変わるリスクがあるんですね。

 「フォント」のデザインの奥深さ 

上記の通り、「フォント」はデザインされたプロダクトですのでWindowsやMacOSはじめ、利用するソフトウェアによって採用されるフォントが異なっても仕方ありません。でも正直困りますよね、Windows 8.1 以降からは Mac (OS X Mavericks 以降) にも収録されている “游ゴシック” と呼ばれるフォントが収録され、今まで Windows と Mac で共通のフォントが存在しなかった問題を解決しました。※ただしフォントの太さや標準のスタイルが異なるなど課題はある。





視認性を意識してデザインされたフォントは、可読性 (リーダビリティ) が高いため違和感無くテキストを読みやすくユーザーは文面の意味を理解しやすくなります。昨今のユーザビリティを重要視する観点で見れば必要なポイントですね。

 書籍での使用とWebサイトでの使用との違い 

物理的に印刷された雑誌や紙、看板といった媒体に表示されるフォントは閲覧するユーザーによって見え方が変わることはありませんが、Webサイトの場合は上記の通りPCにインストールされているフォントやブラウザアプリ、表示設定の影響を受けます。
共通した意図するデザインで見せるには、PC等の表示するデバイスに対象のフォントをインストールさせるか、「Webフォント」を利用する事でOSにインストールされていないフォントであっても表示できるようにする、という手を取るしかありません。
ここで「Webフォント」が出てくるんです。

スポンサーリンク

font-family(フォントファミリー)によるフォントの指定



あらかじめOSやデバイスで設定されているフォントを指定して表現するのは正直現実的ではありません。そのため「font-family」を使用し代表的なフォント群を指定する事になります。

代表的なフォント


 Arial 

1982年に設計された歴史あるフォントです。Helveticaデザインと非常に似た書式となっています。
Microsoft Windows, Apple MacOS, Google Webフォントでも採用されています。



 Verdana 

Microsoftが視認性向上を目的にデザインしたフォント。「Verdana」は、「緑豊かな」「青々とした」を意味している。
Microsoft Windows, Apple MacOS, Google Webフォントでも採用されています。



 ヒラギノ 

ヒラギノ角ゴは可読性と存在感を両立させたフォントで見出しから本文まで幅広く使える欧文和文フォントです。
Macには標準でインストールされていますが、Windowsには入っていません。



 Meiryo/メイリオ 

ヒラギノ角ゴは可読性と存在感を両立させたフォントで見出しから本文まで幅広く使える欧文和文フォントです。ベースはVerdanaからのリデザインであり、和文においてはVerdanaを基調にデザインされました。
Macには標準でインストールされていますが、Windowsには入っていません。



 MS Gothic 

Word等のMicrosoft Officeツールで有名なフォントでWindows95から搭載されている歴史あるフォントでInternet Explorer など多くのウェブブラウザで標準の日本語フォントに設定されている。



Google Web Fonts



Webフォントとして使用可能でGoogleのWebサーバより配信されています。通常のネット閲覧時にキャッシュに取り込まれるため実質的に表示に時間を必要としません。また、下記に紹介する一般的に有名なフォントもサポートしているため、デバイスに関係無く共通のデザインで閲覧ができます。

Google Fonts
Making the web more beautiful, fast, and open through great typography

使い方は後ほどご紹介します。

総称ファミリー



font-family(フォントファミリー)で指定したフォント全てがブラウザーで利用できない場合この「総称ファミリー」を指定します。
ゴシック系の「sans-serif」を指定した場合には、Windows系OSであれば「MS Pゴシック」、 Windows 8.1のIE 11.0ブラウザーでは「メイリオ」、Mac系OSでは「Helvetica / ヒラギノ角ゴシック ProN」というように、OSやブラウザーなどの環境にあわせて自動でゴシック系の文字を選んで表示してくれます。総称ファミリー名は”font-family”の一番最後に書くことが推奨されています。

フォントは以下のようにフォント群の名前を指定するようになります。
・sans-serif:ゴシック系のフォント
・serif:明朝系のフォント
・cursive:筆記体・草書体のフォント
・fantasy:装飾的なフォント
・monospace:等幅フォント

スポンサーリンク

CSSでのフォントの指定方法


CSSでの「font-family」指定方法とオススメ



font-family にはフォントをいくつでも指定できます。
font-familyの値には、文字フォントの名前(フォントファミリー名)を全角、半角、スペース含み正しく記述します。
フォント名にスペースがある場合は、ダブルクォーテーション(” “)、もしくはシングルクォーテーション(‘ ‘)で囲む必要があります。

また、記載されたフォントの左側から順番に読み込まれるため英数字と日本語を別々のフォントで指定したい場合、英語フォントを先に指定する必要があります。

書籍等のデザイン、レイアウトを意識する場合でなければ上記に挙げた代表的なフォントの組み合わせで十分かと思います。
CSSファイルに以下を記述して定義しておきましょう。
※WordPressテーマの「Cocoon」では標準で”游ゴシック”に設定されています。

.font-family sample {
  font-family: Helvetica , "游ゴシック", Meiryo, sans-serif;
}


スポンサーリンク

Webフォントの指定方法



Webフォントとは、フォントデータをWebサーバからインターネット経由でキャッシュに読み込む事で表示できるようになる物です。上記の記載の通り、OSやアプリのフォント設定に関係無く利用できるメリットがありますが、フォントを多く利用する場合、最初の読み込みで時間がかかるため必要以上に使わないよう注意しましょう。

Google Web Fonts を指定する方法



基本的なCSSのコードは先程と同様に「font-family」の設定方法と同じです。
まずGoogle font のWebサイトにアクセスし使用したいフォントを決めましょう。色々合って迷いますね^^

フォントを選ぶとこのように埋め込めば良いコードを表示してくれます。

「Embed Font」に記載されたコードは「head」部分にコピーします。
 ※WordPressの場合、テーマによっては「head」内を編集できる物とできない物があるので注意。

<link href="https://fonts.googleapis.com/css?family=Chakra+Petch" rel="stylesheet">

「Specify in CSS」に記載されたコードはCSSファイルにコピーし、HTMLで呼び出します。

サンプル:

HTML(記事部分)にこう記載すれば簡単に表現できます。

<div style="font-family: 'Chakra Petch', sans-serif;">(テキストを記載する)</div>

表示結果はこのようになります。

GOOGLE WEB FONTS “Chakra Petch” — Chakra Petch is a Thai and Latin family which features Thai’s traditional looped letterforms. It’s a square sans serif with tapered corners. Due to the design, it works well for both digital and print based media.


フォント紹介


以降、個性的でファッショナブルなフォントをいくつかご紹介

Spicy Rice
GOOGLE WEB FONTS “Spicy Rice” — Casual and exciting, Spicy Rice has a festive flair to it that works for winter holidays as well as summertime jams. The extra heavy letterforms imbued with a little exotic flavor are waiting for you to bring it to the party!


Permanent Marker
GOOGLE WEB FONTS “Permanent Marker” — Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.


Gloria Hallelujah
GOOGLE WEB FONTS “Gloria Hallelujah” — This font is based on the handwriting of a Korean high school student. It is fun and reminds me of a comic style writing. It looks great in all caps and is easy to read.


Shadows Into Light
GOOGLE WEB FONTS “Shadows Into Light” — This clean, neat handwriting font has a feminine feel with nice rounded edges and curves. It is perfect for adding a personalized touch to your project.

結構個性的でキャッチーなWebサイトを作るのにはこういったフォントはいいですね

スポンサーリンク

Webアイコンフォントのオススメ:Font Awesome



Webフォントのもう1つのメリットがアイコンの表示を自由にできることです。
ヘッダー部分や文章のポイントに使えてデザイン性アップ!有名なフォントがFont Awesomeです。

Font Awesome を指定する方法

Font Awesome 5
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

上記サイトにアクセスしてお気に入りのデザインを探しましょう!すごく良いですよ。ちなみにWordPressも使用しています。
気に入ったアイコンを見つけたらクリックしましょう。必要なコードが書いてありますのでコピーします。

指定方法は超簡単!
上記のGoogle font と同じく、ヘッダ部分に埋め込むコードでCSSもしくはHTMLで記述するコードを追加すれば表示できます。

ヘッダ部分にはこちらのコードを入力します。(記事作成時のバージョン5.4.2時点のものです)

<llink rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

サンプル:

HTML(記事部分)にこう記載すれば簡単に表現できます。

<div class="anchor">
  <i class="fas fa-anchor"></i>
</div>

表示結果はこのようになります。

 anchor アイコン

大きさや色ももちろん変更できます。

 anchor アイコン


Font Awesome アイコン紹介



以降、アイコンをいくつかご紹介します。色々ありすぎて迷っちゃいますね。

android
<i class="fab fa-android"></i>
  
apple
<i class="fab fa-apple"></i>
  
address-book
<i class="far fa-address-book"></i>
  
address-card
<i class="far fa-address-card"></i>
  
book-open
<i class="fas fa-book-open"></i>
  
book
<i class="fas fa-book"></i>
  
briefcase
<i class="fas fa-briefcase"></i>
  
briefcase-medical
<i class="fas fa-briefcase-medical"></i>
  
cart-plus
<i class="fas fa-cart-plus"></i>
  
bus
<i class="fas fa-bus"></i>
  
bitcoin
<i class="fab fa-bitcoin"></i>
  
camera
<i class="far fa-camera"></i>
  
cc-paypal
<i class="fab fa-cc-paypal"></i>
  
cc-visa
<i class="fab fa-cc-visa"></i>
  
cloud-download-alt
<i class="fas fa-cloud-download-alt"></i>
  
burn
<i class="fas fa-cc-visa"></i>
  
cog
<i class="fas fa-cog"></i>
  
cogs
<i class="fab fa-cogs"></i>
  
comments
<i class="far fa-comments"></i>
  
comment-dots
<i class="fab fa-comment-dots"></i>
  
hand-point-left
<i class="fas fa-hand-point-left"></i>
  
handshake
<i class="far fa-handshake"></i>
  

2018年10月現在でアイコンは1391種類!今も定期的に追加されています。
お気に入りのアイコンを探しましょう^^



スポンサーリンク

さいごに



前回から引き続き第2弾という事でフォントを中心に記事にまとめました。
Webフォントの使いすぎはレスポンス上問題がありますが、ある程度バランスを意識したレベルであればWebサイトの表現に幅が出て個性やデザインの観点でメリットが多くありますよね。
今回の記事でご興味を持たれた方はぜひフォントのカスタマイズにチャレンジしてみてください^^

長文最後までお付き合い頂きましてありがとうございました!

コメント