フォントの一覧表示・CSSでフォント変更する方法

フォントの一覧表示・CSSでフォント変更する方法 フォント

ホームページやブログのフォントをCSSで変更したり、PCにインストールされているフォントを一覧表示させるための方法に関する記事です。

ウェブサイトやブログのフォントは、CSSの「font-family」によって定義されています。フォントは数種類指定され、使う機種やブラウザによって表示されるフォントが変わります。

フォントの追加はそれほど難しくないので、自分好みのかわいいフォントや手書き風のフォント、かっこいいフォントに変更してみてください。

このブログでは、PCにインストールされているフォントをブラウザ上で一覧表示できるウェブサービス「wordmark.it」の使い方や、ウェブサイトやブログのフォントをブラウザの開発者ツールで調べる方法 、ブログテーマのCSSを修正してフォントを変更する方法を紹介しています。

フォント

WhatFontの使い方 フォントを調べるChrome拡張機能

ウェブサイトやブログに使われているフォント情報を取得できるChromeの拡張機能「WhatFont」の使い方を紹介します。WhatFontはフォント名だけでなく、フォントに設定されているサイズ、太さ、行間などのCSSの属性も詳しく表示してくれます。
フォント

インストール済みフォントを一覧表示 wordmark.itの使い方

PCにインストールされているフォントをブラウザに一覧表示できるウェブサービス「wordmark.it」をご紹介します。wordmark.itはシンプルで見やすく、大量のフォント比較や選択したフォントだけの表示、Googleフォントも一覧表示できます。
フォント

このフォント何? ウェブサイトやブログのフォントを調べる方法

ChromeやFirefox、Edgeといったモダンブラウザの開発者ツールを使うと、ウェブサイトやブログに使われているフォントを簡単に調べることができます。ページ内のテキストを反転させて要素を調査すると、使用フォントの情報が表示されます。
フォント

ブログのフォントをCSSで変更する

ブログテーマ内のCSSにあるfont-familyを修正して、ブログのフォントを変更してみました。ブログのフォント変更は簡単にできるので、ぜひ試してみてください。フォントの種類はいろいろありますが、メイリオは読みやすいのでオススメです。