Web フォント

使い方

参考：

10分で設定完了！ Web フォントの使い方や軽量化／はてなブログでの設定手順、優良リソースなどまとめ／おすすめ日本語フォントも | Brian’z Imagination

Web フォントとは？メリット／デメリットなど 完全ガイド初級編 | BRISK

Web fonts done right (Joe Honton) | UX Collective

概要

参考：

日本の Web サイトでよく使われるフォントまとめ | HubSpot

デフォルトフォント

Windows

ブラウザ	標準	セリフ体／ 明朝体 (serif)	サンセリフ体／ ゴシック体 (sans-serif)	等幅 (monospace)
Edge	メイリオ	游明朝	メイリオ	MS ゴシック
Chrome	メイリオ	游明朝	メイリオ	MS ゴシック
Firefox	メイリオ	游明朝	メイリオ	MS ゴシック

Mac

ブラウザ	標準	セリフ体／ 明朝体 (serif)	サンセリフ体／ ゴシック体 (sans-serif)	等幅 (monospace)
Safari	ヒラギノ明朝 ProN W3	ヒラギノ明朝 ProN W3	ヒラギノ角ゴシック W4	Menlo / ヒラギノ角ゴシック W3
Chrome	ヒラギノ角ゴシック ProN W3	ヒラギノ明朝 ProN W3	ヒラギノ角ゴシック ProN W3	Osaka
Firefox	ヒラギノ角ゴシック ProN W3	ヒラギノ明朝 ProN W3	ヒラギノ角ゴシック ProN W3	Osaka

参考：

ブラウザのデフォルトフォント | もうパンツはかない

Web ブラウザのデフォルトのフォント | iPentec

明朝体

参考：

font-family で Mac から Windows まで明朝体指定 – Qiita

おすすめの明朝体の font-family 設定ときれいで読みやすくい書体の比較 | dainamo

Windows でもきれいな明朝体 CSS で指定 | 備忘録オンライン.com

どの環境でも綺麗なゴシック体、明朝体のフォントを指定する | GRAYCODE

CSS にたったの1行！明朝体を Windows 8.0 以下でも綺麗に表示する方法 | GMO ソリューションパートナー株式会社

私流 Web サイトの明朝体はこう指定する！オススメの font-family | ディーライズ

複数のウェイトを使う

• font-weight
• font-style

同じ font-family で、font-weight と font-style を変えて @font-face を定義する。

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}
Code language: CSS (css)

参考：

Web フォントで複数のウェイトやスタイルを持つ書体を定義する – Qiita

@font-face で複数の weigth や style を持つ Web フォントを定義する方法 | WEB クリエイターの部屋

How to add multiple font files for the same font? – Stack Overflow

preload

参考：

Google Fonts を preload で先読みし最適化 | FirstLayout

preload | Can I Use Support Tables

ローカルにインストールされたフォントを使う

参考：

Web フォント、ローカルフォントの指定方法 | softel メモ

Web ページでローカルフォントを使う | text.Baldanders.info

Chrome の font-face で local のフォントが読み込めない問題の解決方法 – Qiita

メイリオと @font-face と残念な描画 | NUMBER-SHOT.NET

Checking for installed fonts with @font-face and local() | Broken Links

How to use the local font if the user already has it? – Stack Overflow

How can I get the PostScript name of a TTF font installed in OS X? – Ask Different

WOFF (Web Open Font Format)

• WOFF：バージョン 1.0 (.woff ファイル)
• WOFF2：バージョン 2.0 (.woff2 ファイル)

参考：

WOFF (Web Open Font Format) | MDN

WOFF (.woff ファイル) | e-Words

游ゴシック

参考：

font-family に Chrome でも読みやすい游ゴシックを指定する方法 – Qiita

游ゴシックは何故 Windows でかすれて見えるのか | Ryusei’s Notes

游明朝

参考：

font-family に游明朝を使用してはいけない理由 – Qiita

等幅フォント

参考：

Courier、Courier New、Consolas | terkel.jp

Menlo と Mac の等幅フォント | terkel.jp

読み込み／優先順位

参考：

The importance of @font-face source order when used with preload | Matt Hobbs

ヒンティング

参考：

ブラウザ, VSCode で表示が汚くなるフォントを救え！シェルスクで自動化編 – Qiita

ブラウザや Electron 系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと – Qiita

無料プラン

参考：

商用でも無料で使える！日本語 Web フォントまとめ | design Edge

有料サービス

参考：

Web フォントサービスの徹底比較！ 和文フォントが使える 5つのサービスの利点まとめ | ICS MEDIA

販売サイト

参考：

web フォントファン

三点リーダーの高さ

font-family で和文フォントを指定すると三点リーダーは行の中央に表示されるが、一部の欧文フォントは三点リーダーの字体を持っており、欧文フォントを指定した場合は行のベースラインに揃えて表示されることがある。

対処法：

次のいずれかを用いる。

• font-family で欧文フォント、あるいは、和文フォントの優先順位を変更する。
• @font-face で unicode-range の指定を使って、三点リーダーのみ別のフォントの字体を使用する。
• lang の指定で ja と en を使い分ける。
• よく似た記号の「⋯」 (MIDLINE HORIZONTAL ELLIPSIS / U+22EF) で代用する。

参考：

三点リーダが真ん中に表示されない理由 | 小粋空間

三点リーダの垂直位置をどうにかしたい | Unformed Building

三点リーダーが Android 端末だけ下付きになる現象の解決方法 | genekibar.com

三点リーダーの位置を OpenType フォントでいい感じにする | cockscomblog?

三点リーダー (…) を真ん中に表示する方法 | Six Apart ブログ

まとめ

参考：

商用利用可能！高品質なオススメ日本語 Web フォント 10選 | ICS MEDIA

Web デザインでよく使う定番おすすめフォント 13選 (日本語 9フォント／欧文 4フォント) | BRISK

おすすめフォント | 伝わるデザイン

保存版 和文の Web フォントサイト 30選 | ferret

Web Fonts | CSS Font Stack

Tips

参考：

Web Font の各種テクニック – Qiita

2020年に最適な font-family の書き方 | ICS MEDIA

やめよう、CSS のシステムデフォルトフォント指定 | Chienomi

Google Fonts

ゴシック体

• Noto Sans Japanese
• M PLUS 1p

明朝体

• Noto Serif Japanese
• Shippori Mincho

丸ゴシック

• M PLUS Rounded 1c
• Kosugi Maru

ドットフォント

• DotGothic16

欧文サンセリフ体／ゴシック体

• Open Sans
• Roboto
• Dosis
• Quicksand

欧文セリフ体／明朝体

• Hahmlet
• Lora
• Playfair Display
• Abril Fatface
• EB Garamond
• Bellefair

欧文手書き／筆記体

• Parisienne
• Caveat
• Caveat Brush
• Amatic SC

公式サイト：

Google Fonts [Official]

参考：

Google フォントの使い方とおすすめフォント 17選／本文、タイトル向けなど | CREATIVE RUSH

Google Web Fonts の雰囲気別おすすめ30選！Web フォントを導入しよう！ | FASTCODING BLOG

Google Fonts おすすめの筆記体／手書きフォント 21選 | ネクストページブログ

Adobe Fonts (旧 Adobe Typekit)

公式サイト：

Adobe Fonts – 無制限のフォントを検索 [公式]

フォント検索 | Adobe Fonts [公式]

参考：

Adobe Fonts、フォントワークス製 UD フォントなど日本語書体を拡充 | PC Watch

Adobe Fonts にフォントワークスの 11フォントが仲間入り／筑紫明朝、UD丸ゴ・角ゴ、キアロなど | 窓の杜

Adobe Fonts の日本語フォントが大幅増／191フォントが追加され、計436フォントに | 窓の杜

アドビ、Adobe Fonts に含まれるモリサワフォントの一部を提供停止 | マイナビニュース

Adobe Fonts でのモリサワフォントの一部提供終了／Adobe Creative Cloud グループ版 | ボーンデジタルスタッフ Blog

Adobe フォントライブラリ Typekit を使用してみる | Tips Note by TAM

Adobe ユーザーならモリサワ Web フォントが無料で利用できるので使ってみた | 登山と写真で仕事をしている人。

Adobe CC Typekit でモリサワのフォントが利用可能に！ | ほりべあぶろぐ

Adobe Typekit が Adobe Fonts へ、複雑な利用制限をすべて撤廃してシンプルに | 窓の杜

Adobe Fonts 提供終了！2021年9月10日以降にモリサワが使えなくなる？ | チャンネル50

Adobe Fonts でいくつかのモリサワフォントが提供終了されるそうです | わしの！おもちゃブログ

Adobe Fonts からモリサワフォントの一部が終了 | イラストレーターの使い方

Adobe Fonts が大幅拡充！日本語フォントラインナップが強化されました | Adobe Blog [公式]

2021年9月にモリサワフォントの一部を提供終了 | アドビヘルプセンター [公式]

Adobe Fonts とは? 2万以上のフォントが使い放題 | Adobe [公式]

サポート | Adobe Fonts [公式]

Web サイトへのカスタムフォントの追加 | Adobe Fonts サポート [公式]

サブスクリプションライブラリからのフォントの提供終了 | アドビヘルプセンター [公式]

Adobe Fonts への提供書体アップデートのご案内 | 株式会社モリサワ

WOFF コンバータ

入手：

WOFF コンバータ | 武蔵システム

Web Font Loader

リポジトリ：

typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face – GitHub

参考：

Google Fonts を非同期で読み込みサイトスピードを高速化 | FirstLayout