【CSS】font-familyプロパティでフォントを指定しよう!

font-familyプロパティについて知りたい人

font-familyプロパティについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

この記事ではfont-familyプロパティについて解説していきます。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

font-familyの評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

font-familyプロパティを利用することでフォントを指定できます。

指定したフォントがWebサイト閲覧者の環境にない場合、ブラウザで設定された標準フォントが表示されます。

値の指定方法は以下の通りです。

{ font-family: ファミリー名, 一般フォント名; }

カンマで区切って複数のフォントを指定でき、Webサイト閲覧者の環境に用意された最初のフォントで表示されます。

ファミリー名の値で指定したフォントがWebサイト閲覧者の環境にない場合、ブラウザーのシステムフォントから以下のキーワードに対応するフォントで表示されます。

それではfont-familyの使い方をみていきましょう。

body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }

上記の例では、まずHelvetica Neueを指定し、その後フォールバックとして具体的なフォント名を指定しています。

最後にsans-serifを指定することでHelvetica Neueに対応せず、さらに具体的に指定されたフォントがインストールされていない環境ではゴシック系のシステムフォントが使用されます。

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント