Web事業部LP
Web事業部LP
2019.09.27

Webフォント(日本語/欧文)サイトまとめ9選!変更方法もご紹介します

野田
※ この記事は、2015年4月21日に公開された記事を、最新状況を踏まえて再編集したものです。

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

もう少し逃げていたかった……現実から……。

という話は置いておいて。

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

Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか?




Webフォント

Webフォントを導入すると、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントも表示できるようになります。いちいち自分のローカルにインストールする必要もないので、めっちゃ便利です。

しかも、Webフォントを使うことで、サイトのデザイン性を向上させることができますし、何よりサーバーから読み込むため、iPhone、Android、PC、どの端末でも共通のフォントを表示させることができるというメリットがあります。

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

今回はそんな方のために、Webフォントに関するサイトのまとめと、使い方を簡易的にお伝えします。とりあえず、一回だけサクっとやってみちゃってください!案外それをきっかけに興味を持つものだと思うので、僕はきっかけづくりができればいいかな〜なんて良い人ぶって書かせていただきます。

Webフォントの使用手順

ではさっそく、下記の手順を参考にWebフォントの設定をしてみてください。

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

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

欧文フォント、和文フォント、アイコンなど、使うフォントによって、出力できるものが異なるのでご注意を。

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

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

このとき、ローカルに使用したいフォントがある場合は、※サーバへアップロードしてください。

※ライセンス確認は必ず行ってください。著作権フリーでも再配布禁止のフォントはたくさんあるので、ご注意ください。

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

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

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 Fonts(欧文フォント)

Google Web Fonts

Googleの提供しているWebフォントサイトです。

すべて無料で使用できるので、とりあえず困ったときはここを使っておけばいいと思います!

Fonts.com(欧文フォント/和文フォント)

Fonts.com

海外では結構有名なWebフォントサイトで、有名企業も取り入れているようです。

無料と有料プランがあります。Helveticaをよくお使いになる方は、ここです。

Fontspring(欧文フォント)

海外製のフォントメーカーのほとんどを網羅しているサイトです。ショッピングサイトですが、無料のものも見つけることができます。

Font Squirrel(欧文フォント)

Font Squirrel

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

TypeSquare(和文フォント)

TypeSquare

和文フォントではとても有名ですね。

日本のフォントメーカーであるモリサワのWebフォントサービスです。有料であり、PV(ページビュー)を基準にプランが変わります。

FONTPLUS(和文フォント)

FONTPLUS

フォントワークス、イワタ、モトヤ、白舟書体、モリサワなどの大手フォントメーカーが参加するWebフォントサービスです。

有料ですが、有名フォントがかなり豊富なため、利用している大手企業も多いようです。

もじでぱ(和文フォント)

もじでぱ

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

Adobe Fonts(欧文フォント/和文フォント)

Adobe Fonts

アドビシステムズが提供しているフォントです。

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

FONTPLUS(欧文フォント/和文フォント)

FONTPLUS

ソフトバンク・テクノロジーが運営しているサイト。こちらも有料ですが、特徴としては全2873書体(2019年7月現在)が使えるという圧巻の書体数。




まとめ

今回は、Webフォントを触ったことのない人向けに、表示をするためだけのシンプルなWebフォント使用法の紹介しました。

本当は、拡張子ごとの対応ブラウザやhtml5.jsを使うポイント、cssfonts-min.cssを読み込ませてブラウザ間での表示を統一化させる方法など、説明をしたいことがたくさん。

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

 

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

【株式会社LIGについて】

わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。Webフォントの知識を活かした制作実績も!Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。