目次

まえがき

リポジトリとサポートについて
表記関係について
免責事項
底本について

第1章 ウェブフォントについて

1.1 ウェブフォントとは?
1.2 ウェブフォントのメリット、デメリット
1.3 フォントデータの中身
1.4 ウェブフォントの形式

第2章 ウェブフォントを使う

2.1 自前で用意する場合
2.2 その他の方法

第3章 ウェブフォント最適化

3.1 ウェブフォントとクリティカルレンダリングパス
3.2 各ブラウザの挙動の違い
3.3 ウェブフォントでよくある問題
3.4 CSSによる最適化
3.5 JavaScriptによる最適化
3.6 キャッシュによる最適化
3.7 preloadによる最適化
3.8 最適化チェックリスト

付録A フリーフォントのライセンスについて

A.1 ウェブフォントの扱い
A.2 ウェブフォントとして利用可能なライセンス
A.3 著作権侵害をしないために気をつけることリスト

付録B おすすめの日本語フリーフォント

著者紹介

まえがき

 タイポグラフィは、デザインやブランディングだけでなくユーザー体験にも大きく影響する重要な要素です。ウェブデザインの際、ウェブフォントを使うことでOSや解像度、画面サイズなどに影響されず一貫したタイポグラフィを実現することができます。優れたデザインやユーザー体験を提供するためにウェブフォントはとても重要なのです。

 しかし、日本ではウェブフォントの使用が敬遠されがちです。その理由は「ウェブフォント(の動作)が重いから」です。

 たしかに、日本語のウェブフォントのファイルサイズは大きくなりがちです。しかし適切な使い方をした上で読み込みを最適化すれば、サイト全体のパフォーマンスへの影響を軽減することができます。きちんと最適化すれば、画像文字を使う場合よりパフォーマンスを向上させることもできるのです。

 本書ではウェブフォントの最適化について、さまざまな手法を紹介しています。本書を読むことでウェブフォントへの抵抗を払拭し、ウェブフォントを使ってウェブサイトの「おしゃれ」を楽しんでもらえたら嬉しいなと思います。

対象読者

 ウェブフォントを使いたいと思っているフロントエンドエンジニア、ウェブデザイナー

対象環境

 本書のコード、公開しているサイトやソースは下記環境を対象にしています。その他の環境での動作は保証しかねます。ご了承ください。


Chrome、Opera、Safari、Edge(それぞれ最新版)

お問い合わせ

 本書に関するお問い合わせは、https://twitter.com/takanoripe までお願いします。

謝辞

 レビューに協力してくださった皆様、本当にありがとうございました。

リポジトリとサポートについて

 本書に掲載されたコードと正誤表などの情報は、次のURLで公開しています。


  https://github.com/impressrd/support_webfontbook

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

底本について

 本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています

試し読みはここまでです。
この続きは、製品版でお楽しみください。