フォント
デバイスフォント・WEBフォント大解剖 〜新人デザイナーのテキストフォント選び〜 | WebNAUT
https://webnaut.jp/design/1180.html
2024年に最適なfont-familyの書き方 - ICS MEDIA
https://ics.media/entry/200317/
今さら聞けないWebフォントの基礎知識 | 株式会社LIG
https://liginc.co.jp/547818
Webサイトで使用される定番フォント9選! フォントの選び方や良いフォントの特徴も解説! | 株式会社PLAN-B
https://www.plan-b.co.jp/blog/creative/53344/
【css】Webフォント、ローカルフォントの指定方法 at softelメモ
https://www.softel.co.jp/blogs/tech/archives/3676
Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介!
https://www.unprinted.design/articles/google-fonts/
ウェブサイト制作では、游ゴシックはおすすめしない理由 | クリエイターズ・シナジーカフェ
https://community.creators-synergy-cafe.com/blogs/711fed11c7fb
■実例
以下は実際にWebフォントを使用してみたもの。
ふい字P
https://refirio.org/memos/font/huifont/
■ファイル形式について
Webフォントには「woff」「woff2」「ttf」といった種類がある。
IEを無視して良ければ「woff2」を、IEを考慮しておくなら「woff」「ttf」を使用すると良さそう。
自社サーバーにフォントをアップロードして、Webフォントを使用する方法|株式会社ゼロワンアース
https://01earth.jp/web-create/coding/web-font/
TTF WOFF2 変換 フリー、 ttfをwoff2に変換 オンライン
https://miconv.com/ja/ttf-o-woff2/
■TrueTypeフォントとOpenTypeフォントについて
OpenTypeで表示できるなら、そちらを使うと良さそう。
OpenTypeフォントとは? - Home
https://mp-support.morisawa.co.jp/hc/ja/articles/28443707966105-OpenType%E3%83%95%E3%82%A9%E3%83%B3%...
TrueTypeフォントとOpenTypeフォントの違いを教えて下さい。 | フォント・書体の開発及び販売 | ダイナコムウェア株式会社
https://www.dynacw.co.jp/support/support_faq_detail.aspx?qid=501&fcid=200
TrueTypeとOpenType、どう選べばいい?|デザインポケット[design pocket]
https://note.com/design_pocket/n/nf7b637cb501b
■CJKについて
「C(Chinese)、J(Japanese)、K(Korean)の全てが入っているフォントで、その中でJapaneseを優先的に表示するようになっている」らしい。
Geeko Blog > Noto Sans CJK JPと、Noto Sans JPの違い
https://blog.geeko.jp/syuta-hashimoto/2446
■利用できそうなフォント
2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
https://coliss.com/articles/freebies/japanese-free-fonts.html
日本語フォントがGoogle Fontsに大量追加!すべてのフォントが商用利用も無料のフリーフォントです | コリス
https://coliss.com/articles/freebies/google-fonts-for-japanese.html
フォントが大好物な人に朗報 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ!! | コリス
https://coliss.com/articles/build-websites/operation/work/googlefonts-morisawa-biz-ud-gothic-and-min...
これはかなりいい! Helveticaに似たオープンソースの無料フォント -Overused Grotesk(異世界のHelvetica) | コリス
https://coliss.com/articles/freebies/overused-grotesk-helvetica-in-an-alternative-universe.html
LINE Seed
https://seed.line.me/index_jp.html
■Google Fonts
Browse Fonts - Google Fonts
https://fonts.google.com/
Google Fonts + Japanese - Google Fonts + 日本語
https://googlefonts.github.io/japanese/
Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介!
https://www.unprinted.design/articles/google-fonts/
数字で見るGoogleフォントベスト15 2024 年版(使い方のヒント付き)
https://kinsta.com/jp/blog/best-google-fonts/
■Noto Sans CJK
以下のフォントは、中国語・日本語・韓国語に対応しているらしい。
公式によると
「Noto Sans CJK は、繁体字中国語、簡体字中国語、日本語、韓国語を完全にカバーするグリフのバリエーションを備えています。」
とのこと。
GitHub - notofonts/noto-cjk: Noto CJK fonts
https://github.com/notofonts/noto-cjk
Google Developers Japan: オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。
https://developers-jp.googleblog.com/2014/07/noto.html
■アイコンフォント
Font Awesome
https://fontawesome.com/
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome
Font Awesome アイコンフォント一覧 [Free (フリー) のみ] | JOHOBASE
https://johobase.com/font-awesome-icon-font-list-free/
■コーディング用フォント
プログラミング向けフォント「0xProto」の紹介 #開発環境 - Qiita
https://qiita.com/usamik26/items/2ab0c4b88bf7c00845dd
日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開 - 窓の杜
https://forest.watch.impress.co.jp/docs/news/1596755.html
日本人プログラマー向けカスタムフォント「UDEV Gothic」が約2年半ぶりのメジャー更新 - 窓の杜
https://forest.watch.impress.co.jp/docs/news/1617092.html
日本人プログラマ向け、プログラミングに適した「フォント」まとめ。2024年版 − Publickey
https://www.publickey1.jp/blog/24/2024_1.html
■デバイスフォントとデザイン
・デバイスフォント=パソコンで本文とかに使う、ディスプレイでの文字の読みやすさを考えて作られたフォント。派手な見た目のことは考えていない。
・デザイン重視のサイトで、タイトルなど目立つ箇所にデバイスフォントを使うのは、(まともなデザイナーなら)原則としてあり得ない。
・タイトルなどでデバイスフォントが使われていたら、フォントが無いために意図したデザインを確認できていない可能性を考える。
・正解のデザインを知っておく(PNG画像として書き出したものを送ってもらうなど)。