使い方

参考

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

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

Web fonts done right (Joe Honton) | UX Collective

デフォルトフォント

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

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

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

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

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

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

複数のウェイトを使う

  • font-weight
  • font-style

同じ font-family で、font-weightfont-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;
}

参考

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-faceunicode-range の指定を使って、三点リーダーのみ別のフォントの字体を使用する。
  • lang の指定で jaen を使い分ける。
  • よく似た記号の「⋯」 (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

ゴシック体
明朝体
丸ゴシック
ドットフォント
欧文サンセリフ体/ゴシック体
欧文セリフ体/明朝体
欧文手書き/筆記体
こちらのページを参照

参考

Google Fonts [Official]

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

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

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

Adobe Fonts (旧 Adobe Typekit)

参考

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 – 無制限のフォントを検索 [公式]

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

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

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です