お問い合わせ

野田

Follow@LIG_J

2015.04.21

Webフォント（日本語／欧文）サイトまとめ9選！変更方法もご紹介します

（編集部注：2013年03月07日に公開された記事を再編集したものです。）

先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。
もう少し逃げていたかった・・・現実から・・・。

という話は置いておいて。
最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。

Webに関わっている人で、「結構気になってるけど触っていない・・・」という人も多いんじゃないですか？

Webフォント

Webフォントを導入すると、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントを表示できるようになります。
CSS3が一般化してきて、そろそろ本格的に利用したくなってきましたね。

Webフォントは難しいと思われがちですが、ほんのちょっとの手順を踏めば、案外簡単に利用できます。
しかし、忙しいという理由で後回しにしている方も多いのではないでしょうか？

今回はそんな方のために、Webフォントサイトまとめと、使い方を簡易的にお伝えします。とりあえず一回だけサクっとやってみちゃってください。

案外それをきっかけに興味を持つものだと思うので、僕はきっかけづくりができればいいかな〜なんて偽善者ぶって書かせていただきます。

Webフォント使用手順

ではさっそく、下記の手順を参考にしてみてください。

手順1. 使いたいフォントを見つける

まずは、使いたいフォントを見つけてください。

欧文フォント
和文フォント
アイコン

使うフォントによって、出力できるものが異なるのでご注意を。

フォントを見つけられるサイトは、このページの一番下にまとめてありますので良かったらご覧ください。

▼ Webフォントサイトまとめへ

このとき、ローカルに使用したいフォントがある場合は、*サーバへアップロードしてください。
※ライセンス確認は必ず行ってください。著作権フリーでも再配布禁止のフォントはたくさんあるので、ご注意ください。

手順2. CSS3の@font-faceでフォントファイルを指定

CSS3の@font-faceでフォントファイルを読み込ませます。
念のためですが、第三者サーバにあるフォントに関しては絶対パスになります。

Google Web Fontsに関しましては、フォントを選ぶとCSSを提供してくれるので、それを読み込ませるだけになります。
Google Web Fontsの指定は後ほど。

/* IE */
@font-face {
font-family: フォント名;
src: url(font/フォント名.eot);
}
/* Firefox, Opera, Safari */
@font-face {
font-family: フォント名;
src: url(font/フォント名.ttf) format(”truetype”);
}

手順3. CSSでWebフォントを適用させる

手順2. のCSSを読み込ませた状態で、下記の記述をします。

CSS

h1 {
  font-family: ‘フォント名’;
}

HTML

<h1>Web Font</h1>

手順4. 確認（おわり）

とりあえず、大体これで終わりです。ブラウザで確認してみてください。
検証となりますので、IEに関しては最新版で行ってくださいね。

手順が面倒な人向け（Google Web Fonts）

手順ですら面倒だと思う方は、下記のソースをメモ帳かなにかに貼り付け、HTMLにしてブラウザで確認してみてください。

Google Web Fontsを利用してWebフォントを表示しています。
今回は、わざと分かりやすいようなフォントを選んで使わせていただいております。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<style type=”text/css”>
body {
	font-size: 25px;
	font-family: ‘Sacramento’, cursive;
}
</style>
<link href=’http://fonts.googleapis.com/css?family=Patrick+Hand+SC’ rel=’stylesheet’ type=’text/css’>
</head>
<body>
<h1>google web font</h1>
</body>
</html>

表示できましたか？？　本当に簡単でしょ？

Webフォントサイトまとめ

いくつかWebフォントサイトをまとめたので、紹介していきたいと思います。

Google Web Fonts（欧文フォント）

http://www.google.com/webfonts

Googleの提供しているWebフォントサイトです。
すべて無料で、ソースの読み込みも簡単。ソースを読み込むだけでIEにも対応してくれます。本当ありがたい。

Fonts.com（欧文フォント／和文フォント）

http://www.fonts.com/ja

海外では結構有名なWebフォントサイトで、有名企業も取り入れているみたいです。
無料と有料プランがあります。
Helveticaをよくお使いになる方はここです。

Fontspring（欧文フォント）

http://www.fontspring.com/

その名のとおり、フォントのショッピングサイトです。
ショッピングサイトといっても、無料のものも見つけることができます。

Font Squirrel（欧文フォント）

http://www.fontsquirrel.com/

海外のSOHOの方のサイト（ソース見ると）で使っている方がいらっしゃいました。
すべて無料なので、個性的なフォントを探すと良いものが見つかります。

TypeSquare（和文フォント）

http://typesquare.com/

和文フォントではとても有名ですね。
日本のフォントメーカーであるモリサワのWebフォントサービスです。
有料であり、PV（ページビュー）を基準にプランが変わります。

amanaimages WEBフォント（和文フォント）

http://amanaimages.com/font/web/index.aspx

字游工房、タイプバンク、味岡伸太郎、七種泰史など大手フォントメーカーが参加しています。
有料ですがフリートライアルフォントがありますので、クライアントワークであれば試してから採用するという手もありますね。

FONTPLUS（和文フォント）

http://webfont.fontplus.jp/

フォントワークス、イワタ、モトヤ、白舟書体、モリサワなどの大手フォントメーカーが参加するWebフォントサービスです。
有料ですが、有名フォントがかなり豊富なため、利用している大手企業も多いようです。

もじでぱ（和文フォント）

http://mojidepa.com/

文字のデパート（たぶん）です。
有料となりますが、たくさんフォントがある上に料金も安いので、自分でフォントを見つけてサイトに使用したい方におすすめです。

デコもじ（和文フォント）

http://decomoji.jp/

国内初のWebフォントサービスであり、とても感動したのを覚えています。
こちらも有料ですが、料金がとても安くなっています。

まとめ

今回は、Webフォントを触ったことのない人向けに、表示をするためだけのシンプルなWebフォント使用法の紹介しました。
本当は、拡張子ごとの対応ブラウザやhtml5.jsを使うポイント、cssfonts-min.cssを読み込ませてブラウザ間での表示を統一化させる方法など、説明をしたいことがたくさん。

ということで、次回はもう少し具体的なWebフォントの指定方法をご紹介させていただきます！お楽しみに！

【デザイナーがおさえておきたいフォントの基礎知識】

※ 【フォントの些事】第1回インストールする前に確認したいフリーフォントの基礎知識

※ 今さら聞けない？おさえておきたい日本語フォント！

※ デザインに関わる人へ。最低限押さえたいフォントの基礎知識あれこれ

※ デザイナーのためのテスト・クイズまとめ「フォント当て」「カーニング」など

※ これなら手が届く！1書体から買えるオススメ和文（日本語）フォント5選

この記事を書いた人