CSSでフォントを指定したつもりでも、正しいフォントがあたっていないことが結構あります。
私は駆け出しの方のコーディング課題を頻繁に確認しますが、フォント周りの修正箇所が非常に多いです。
それは正しい確認方法があまり知られていないからかなと思っています。
そこで今回はChromeの検証ツール及び拡張機能を使ったフォントの確認方法を見ていきます。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
拡張機能で確認する方法
WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
フォントの情報を一覧で見ることが可能。
Fonts Ninja
https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja
情報がスマートで見やすい。
拡張機能の欠点
そこまで正しくない
実は拡張機能のフォント判定は結構曖昧で、実際に使用されているフォントからずれている場合がありました。
なので、検証ツールで実際に使用されているフォントを確認したほうが確実だと最近気づきました。
検証ツールで確認する方法【推奨】
検証のComputed(計算済み)の一番下に「レンダリングフォント」というのがあるので、そこから確認できます。
確認したい要素を選択して、
Computed（計算済み）の一番下を確認する。
ここを信用したほうがいいですね。
更に詳しい検証ツールの使い方は以下の記事にて解説しています。
Noto Sans JPをお使いの場合は、以下の記事も役立つはずです。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
