LogoMark.png

WebFonts

WEB FONTS


Webフォントとは、CSS3で新たに導入された仕様で、ページ中のテキストの表示をサーバーに置いたフォントをダウンロードして利用できるようにしたものです。かつては、ブラウザに表示される文字は、閲覧者のフォント環境に依存せざるをえない状況でしたが、Webフォントの技術によって、すべての閲覧者に対して同一イメージでの閲覧を実現できるようになりました。ただし、日本語サイトの場合、フォントデータがそれなりに大きいので、初回アクセス時には、フォントのダウンロードの時間分だけ表示が遅れることになります。

近年、Webページに使用されている文字だけをダウンロードさせる「サブセット化」と、CDN(コンテンツ配信ネットワーク)の利用によって、従来の数倍の速さが実現されるようになっています( モリサワ TypeSquare)。

CONTENTS


Google Fonts

Google が提供するWebフォントが充実しています。導入の仕方も簡単ですので、まずはこちらをお試しください。

around

Google 日本語フォント

Google と Adobe が共同開発したNotoフォントや、M+フォントが、無料で提供されています。使い方は上記の Googleフォントと同様です。





Font Awesome

Font Awesomeとは、さまざまなアイコンを Webフォント として利用できるようにしたもので、アイコンがフォント扱いなので、サイズや色を CSS で変更することができます。CDNを使う、あるいはフォントセットをダウンロードして自身のサーバーに置く、いずれも可能です。

CDNを使う


Downloadして使う

利用できるアイコン

Ver.5 にアップグレードされ、その仕様、使い方も変更されています。

HTML内での記述


以下は、Ver.4.7 のルールです。

一般的なWebフォントの使い方

自分が所有するフォントデータを使用する場合は、サーバーにフォントデータをアップして、それを閲覧者にDLしてもらいます。以下、手順です。

サーバーにフォントデータを置く

Webに最適化された「Webフォント」のデータをサーバーに置きます。ここでは、例えば、ドキュメントルート(index.htmlを置く場所)に「webFont」というディレクトリをつくって、そこに「freeFont.otf」というフォントファイルを置いた・・という前提で話を進めます。

フォントファミリーの定義

CSSファイルに、以下のように記述すると、その freeFont.otf は「myFont」という名称(フォント名は任意に設定可)で利用できるようになります。

@font-face {
     font-family: myFont;
     src: url('./webFont/freeFont.otf') format("opentype");
}


フォントの利用

フォントを実際に利用するには、font-family属性に、myFont を定義します。

h1 {
   font-family: myFont;
}




Webフォントの入手

オープンソースあるいはフリーのフォント


有償のフォント

PAGES

GUIDE

DATA

添付ファイル: fileGoogleFonts.png 309件 [詳細]
Last-modified: 2020-01-14 (火) 10:17:21