Web制作実務役立ち

CSSでフォントが適用されない?おすすめ確認方法を3分で解説【当てたつもりを防ぐ】

CSSでフォントが適用されない?おすすめ確認方法を3分で解説
本ページにはプロモーションが含まれています。

CSSでフォントを指定したつもりでも、正しいフォントがあたっていないことが結構あります。

私は駆け出しの方のコーディング課題を頻繁に確認しますが、フォント周りの修正箇所が非常に多いです。

それは正しい確認方法があまり知られていないからかなと思っています。

そこで今回はChromeの検証ツール及び拡張機能を使ったフォントの確認方法を見ていきます。

しょーご
しょーご
ちなみに、推奨するのは検証ツールを使用した方法です
しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

拡張機能で確認する方法

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(計算済み)の一番下を確認する。

computed(計算済み)はこの位置
フォント確認方法
一番下までスクロールして確認する

ここを信用したほうがいいですね。

更に詳しい検証ツールの使い方は以下の記事にて解説しています。

Noto Sans JPをお使いの場合は、以下の記事も役立つはずです。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!