breakこのウェブサイトはご利用の端末での閲覧に対応していません。25th,2018ユーザーの環境に関係なく表示したいフォントでウェブサイトを彩ることができるWebフォントについて。Webフォントとは何か“Webフォント”とは?WebフォントのメリットとデメリットWebフォントの作り方2通りのフォントの入手方法フリーフォントをWebフォント化する前にWebフォントを作成するWebフォントをサブセット化するWebフォントをアップロードするWebフォントの使い方CSSで“font-family”を定義するCSSでWebフォントを使用したい箇所を指定する複数のウェイト、スタイルを持つWebフォントの定義方法Webフォントとは何か#“Webフォント”とは?通常ウェブページを開いたときにブラウザは端末にインストールされているフォントを使用してウェブページを表示します。そのため、ウェブページの制作者が表示したいフォントを指定してもユーザーの端末にそのフォントがインストールされていなければ意図したフォントとは違うフォントが表示されてしまいます。“Webフォント”はフォントのファイルをサーバー上に置いておき、ウェブページを表示するときにこれを使ってもらうことで意図した通りのフォントが表示されるようにするための技術です。#Webフォントのメリットとデメリットメリット制作者が意図したフォントが表示されるのでレイアウトが崩れたり、ウェブサイトの見た目の印象がユーザーの環境によって違ったりしない。アイコンなどをフォント化することで画像を使用する場合に比べて読み込みを速くすることができる。画像と違って表示する大きさの違いで劣化しない。デメリット特に日本語の場合、ウェブページを読み込むときに大きなフォントファイルを読み込まなければならないため、表示速度が遅くなる。フォントごとのライセンスに従う必要があり、使用するに当たって制約がある場合が多い。ユーザーがブラウザの設定などでWebフォントを無効にしている場合は表示できない。Webフォントの作り方と使い方#2通りのフォントの入手方法Webフォントを使用するにはまずフォントを入手する必要があります。Webフォントに使用するフォントファイルを入手する方法は以下の2通りです。自分で用意したフォントファイルをWebフォント化する方法です。好みのフォントをWebフォントとして使用することができますが、ライセンスによりサーバーへのアップロードを許可していないフォントも多いためすべてのフォントを自由にWebフォントとして使用することができるわけではありません。Fonts”などのサービスを使用してあらかじめ用意されているWebフォントを読み込んで使用する方法です。フォントファイルを自分で用意してサーバーにアップロードする必要がなく手軽に使用することができます。欧文フォントはたくさんの種類がありますが、それに比べると和文フォントはまだあまり多くありません。有料のものと無料のものがあります。Fontsこの記事では用意したフォントファイルをWebフォント化して自分のウェブサイトのサーバーにアップロードして使用する方法について紹介します。#フリーフォントをWebフォント化する前にフリーフォントをWebフォントとして使用するにはそのフォントのライセンスに従う必要があります。サーバーにアップロードすることを許可していないフォントも多いのでそういったフォントは勝手にWebフォント化して使うことはできません。ファイル形式の変換や商用利用などについて決められているものもありますので事前によく読んでおく必要があります。#Webフォントを作成するWindowsやmacOSなどで標準的に利用されているフォントの形式(フォーマット)はTrueType(“.ttf”)が標準的で、配布されているフリーフォントもTrueTypeのものが多いです。Format(“.woff”)が主流です。Formatのものを用意するのが一般的です。他にもフォントファイルの形式はいくつもありますが、Webフォントとして使用することができるフォントの形式には以下のものがあります。Font)Webフォントは複数の形式のフォントファイルを使用することができるので、想定するユーザーの環境に合わせたものを用意します。前述したとおり、現在主流なのは“.woff”で主要なブラウザは対応しています。比較的新しいブラウザは“.woff2”にも対応しています。最低限“.woff”は用意しておくべきです。一部のモバイルブラウザを考慮するのであれば“.ttf”もあると良いでしょう。他の形式については古いブラウザなどを考慮しないのであればなくても大丈夫です。ファイル形式の変換は“WOFFコンバータ”などのフリーソフトで行うことができます。Generator”などもあります。Generator#Webフォントをサブセット化する“サブセット化”はフォントファイルから必要な文字だけを取り出したフォントファイルを新たに作ることです。日本語はひらがな、カタカナ、漢字と文字数が非常に多く、欧文に比べるとフォントファイルが大きくなりがちです。そのWebフォントを使用する場所によって必要な文字が決まっているのであればサブセット化することでウェブページの読み込み時間を短縮することができます。Webフォントサービスを使用する場合やフォントファイルに含まれるすべての文字を使用したい場合はサブセット化の作業は必要はありません。サブセット化は“サブセットフォントメーカー”などのフリーソフトで行うことができます。サブセットフォントメーカー#WebフォントをアップロードするWebフォントは原則クロスオリジン(クロスドメイン)での使用が制限されています。フォントを使用したいウェブサイトとは同じドメインのサーバーにWebフォントファイルをアップロードする必要があります。異なるドメインのサーバーにアップロードするとフォントが表示されない可能性があります。Sharing)の設定で制限を緩和する必要があります。Webフォントの使い方#CSSで“font-family”を定義するスタイルシートでWebフォントを指定できるようにするために、CSSの“@font-face”ルールを使用してフォントを定義します。format('svg');}複数の形式のフォントファイルを“,(カンマ)”で区切って記述することでブラウザが対応している形式のフォントファイルを選んで使用します。“〚フォントの名前〛”はスタイルシートの中で使用するためのフォントの名前を指定します。ここで指定したフォントの名前を使用して適用したい箇所にも“font-family”プロパティで指定します。以下はファイル名などを記述した例です。format('svg');}すべての形式のフォントファイルを用意する必要はなく、不要な形式のフォントファイルは省略できます。古いブラウザを考慮する必要がない場合は以下のように記述できます。format('truetype');}“.woff2”、“.woff”、“.ttf”の順番で対応している形式のフォントファイルをブラウザが使用します。#CSSでWebフォントを使用したい箇所を指定する“@font-face”ルールで定義したWebフォントを使用するには使用したい箇所に定義したものと同じ値を持つ“font-family”を記述します。'〚フォントの名前〛';}例えば“p”要素内のすべての文字にWebフォントを使用したい場合は以下のようにスタイルシートを記述します。{~}”とそのWebフォントを使用する箇所は同じスタイルシートに記述する必要はなく、別々のスタイルシートに記述してもどちらも読み込めばそのWebフォントを使用することができます。同じ“font-family”にウェイト、スタイルごとに異なるフォントファイルを指定したい場合は以下のように定義します。400;}以上で定義したWebフォントを使用する時は定義した“font-family”プロパティ、“font-weight”プロパティや“font-style”プロパティの値を一致させて記述します。