フォントを指定する方法 (font-family) [CSS]

font-family

参考：

font-family | MDN

使い方

参考：

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

font-family の正しい指定方法とおすすめフォント設定まとめ | WiLLMail

font-family の正しい指定方法と書き方／効かない原因や Google Fonts の使い方も | creive

フォントの種類の指定 | Let’s begin CSS

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

CSS で游ゴシックやメイリオなどの font-family を指定するときのベストプラクティス | SPYWEB

font-family | W3Schools

ジェネリックフォントファミリ

• serif：セリフ体／明朝体
• sans-serif：サンセリフ体／ゴシック体
• monospace：等幅フォント
• cursive：筆記体
• fantasy：装飾体

参考：

font-family の generic-family プロパティについて – Qiita

総称ファミリ一覧と CSS でのフォント指定方法 | キーワードノート

デフォルトフォント

参考：

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

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

日本語フォント

Windows

• 游ゴシック (Yu Gothic)
• 游明朝 (Yu Mincho)
• メイリオ (Meiryo)

Mac

• ヒラギノ角ゴシック (Hiragino Sans / Hiragino Kaku Gothic ProN)
• ヒラギノ明朝
• San Francisco (-apple-system / BlinkMacSystemFont)
• Helvetica Neue
• Menlo
• Osaka

iOS

• Hiragino Sans
• San Francisco
• Helvetica Neue

Android

• Roboto

参考：

font-family について本気で考えてみた – Qiita

2020年まで使える font-family おすすめゴシック体 – Qiita

CSS の font-family オススメ設定 | Anyushu

2016-17年最強の Font Family 設定／ゴシック体 | ミルログ

日本語向けフォントスタックの現状 | yuhei blog

モダン日本語フォント指定 | Speaker Deck

Mac

参考：

Mac Catalina Web でのヒラギノフォント表示問題について考えたメモ | かもメモ

macOS Catalina で CSS フォントが明朝体で見にくくなったときの対処法 | iwb.jp

macOS Catalina の Google Chrome 明朝体フォント問題 | ウェブクエスト

macOS Catalina の Chrome が明朝体で表示されるのを修正する方法 | ソフトアンテナブログ

Android

参考：

Android における最適なフォント環境を考えてみる | ミルログ

Web 制作で使える！Android で使えるフォント一覧 | ミルログ

デメリット

参考：

ページ側でフォントを指定するな！ユーザーに任せろ | ミルログ

macOS Catalina でヒラギノ角ゴ Pro / ProN がなくなって困ってる font-family の設定を考える | 榊原昌彦

macOS Catalina でフォントがおかしくなる

参考：

macOS Catalina で font-family 問題から CSS 記述を再考する | Apple Pi

まとめ／Tips

参考：

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

読みやすいフォントの CSS 設定例 | murashun.jp

基本的なテキストとフォントの装飾 | MDN