読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

Webフォントの使い方

Webデザイン web制作

Webフォントとは?

元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォントのメリット
  • ユーザーの環境に依存せず、意図したデザインで表示できる。
  • フォントデータはベクター形式の為、様々な解像度に対応出来る。
  • テキストデータの為、Googleクローラーが認識しやすくなる。

などが上げられます。

Webフォントのデメリット
  • 読み込みに時間がかかる。特に日本語の場合は注意が必要。

Webフォントには主に2種類の使い方がある

GoogleFontsのようなネット上にあるWebフォントサービスを使う方法と、自身の持っているフォントデータをhtmlファイル等と一緒にアップロードし、表示させる方法があります。



GoogleWebFonts

Google Fonts

f:id:yachin29:20151023011253j:plain


GoogleFontsの使い方は非常に簡単で
1、まずは使いたいFontを選び、「Quick Use」ボタンを押す。
2、使用したいFont-weightやFont-styleにチェックを入れる

3、出力されたソースをHTMLに挿入する

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

複数のフォントを使用する場合、フォント名とフォント名の間に|を入れましょう。

<link href='https://fonts.googleapis.com/css?family=Bangers|Ubuntu' rel='stylesheet'>



4、WebFontを使用したいタグにCSSで「font-family」を指定する。

font-family: 'Open Sans', sans-serif;



次に後者の「自身のフォントデータをアップロードし表示させる方法」をやってみます。


1、使いたいフォントデータをダウンロードする。


2、CSSに「@font-face」でフォントの指定をする。

@font-face {
   font-family: MyFont; /*任意の名前を付ける*/
   src: url('fonts/againts.otf') format("opentype");
}


3、適用させたい要素に上で付けたfont-familyを指定する

h1 {
  font-family: MyFont;
  font-size: 40px;
}


このように非常に簡単な記述でWebフォントは使え、最近は無料のフォントデータも豊富にあるのでぜひ使ってみましょう。
ただ、むやみに多種類のフォントを使う事はファイルの読み込みが遅くなり、デザイン的にも良くないので注意が必要です。また、個人・商用共にフリーのフォントでも再配布禁止のフォントはたくさんあるので、ライセンス確認は必ず行いましょう。


ダウンロードしたフォントの中にTrueTypeOpenTypeの両方があった場合、Webサイト制作ではOpenTypeデータを優先的に使いましょう。

TrueType

TrueTypeは歴史が長く、様々なアプリケーションに使われている形式。特にWindows用のアプリケーションでは、いまだにTrueTypeのみをサポートしているというものが残っている。たとえば、年賀状ソフトや、WordやPowerPointの一部の機能はOpenTypeに対応していないものがある。

OpenType

TrueTypeより高度な機能を持たせた新たなフォント規格がOpenType。WindowsMacとの間で互換性を維持できるようになっている点が特徴。



フリーWebフォント(欧文のみ)
www.dafont.com


Google日本語Webフォント Noto Sans Japanese の使い方

f:id:yachin29:20160331133039p:plain



Googleは欧文書体だけでなく日本語のwebフォントも用意しています。
使い方は欧文のGoogleFontsと全く一緒で非常に簡単ですが、欧文と違い日本語はデータ量が非常に重いので、注意が必要です。
サイト内の日本語全文にwebフォントを使用すると、ファイルの読み込み速度が明らかに遅延するので、辞めましょう。

<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">

スタイルシート内のNoto Sans Japanese のフォントを適用させたい要素に指定

 font-family: 'Noto Sans Japanese', serif;