01Web フォントの使い方
まず、使い方として二つの方法があります。
- Webフォントを配布しているサイトのリンクを使って表示させる。
(ScriptをHTMLにコピーして有効化する。) - 自分でフォントをサーバーにアップロードして使う。
(この場合、サーバー上にあるフォントも再配布とみなされる為、再配布禁止されているフォントは使うことができないので要注意！)
02メリットとデメリット
メリット
サイトにあわせた印象を作ることができる
検索エンジン最適化にもアピールできる
レスポンシブデザインに対応ができる
修正が簡単にできる
デメリット
フォントによってはコストがかかる場合がある
ページの表示速度が遅くなる
配布元のサーバーがダメになるとサイトに影響がある
03Web フォントサイト10選
1. Adobe Typekit
画像検索機能を使って欲しいフォントを検索することができる。
日本語にも対応しているので本格的なフォントを使うことができます。
2. Fonts.com
日本語に切り替えることができます。すっきりとしたデザインでとても使いやすいです。
プロジェクト毎にフォントを整理することができるのでとても便利です。
3. もじでぱ
手書きのかわいい雰囲気のフォントが揃っています。
可愛らしいブログに合いそうです。
4. TypeSquare
Webフォントの他にもデスクトップフォントも配布しています。
印刷でよく使用されるモリサワフォントなどプロが使うフォントがWebフォントとして利用できるのでとてもありがたいです。
5. Font+
ソフトバンクテクノロジーが運営しているサービスで有料です。
登録すると様々なフォントが利用できます。
6. Google Font
Webフォントの王道ですね。一度は使ったことがあると思います。
最近、日本語対応になりました。
7. urbanfonts
とても見やすくすっきりとした使いやすいサイトです。
すぐにコードリンクを開くことができるのでとても便利です。
8. Adobe Edge Web Fonts
完全無料、アカウント不要で利用できます。
Edge Web Fontsは、Adobeの商用フォントサービスであるTypekitを使用しているため、クオリティが高いです。
......が最近サイトが見れなくなっていました。スミマセン。
9. CSS Font Stack
Webサイトを作る上で便利なカラーコードや情報を提供してくれています。
10. FONT SQUIRREL
Webフォントとして利用可能なフォントが多く収録されています。
また、フォントジェネレーター機能もあり自分の持っているフォントをWebに最適化することができます。
