TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】
HTML

HTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのページ全体をフォント指定する方法について解説しています。全体のフォントを指定する場合はhtmlタグあるいはbodyタグを対象にCSSで設定を行います。書き方と画面上での見え方を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLのページ全体をフォント指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

ページ全体をフォント指定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

フォント種類を指定する方法

カスケーティングスタイルシート（CSS）のプロパティであるfont-familyにフォントの名前を指定することにて、 フォントの種類を変更できます。従来の手法では、ユーザーのパソコンにも、指定のフォントがインストールされていなければ、代替の標準フォントが使用される仕組みになっています。

近年は、CSS3にて、「Webフォント」の仕組みが実装されたことにより、コンテンツデリバリーネットワーク（CDN）から配信されている共通のフォントが参照されることによって、概ねあらゆる環境でも隔たりなく表示できるようになりました。

 

ページ全体のフォントを指定するには

htmlタグ、あるいは、bodyタグに、font-familyをカスケーティングスタイルシート（CSS）から設定できます。以下、指定方法のサンプルコードです。

 

See the Pen
2020-03-23-sample-15 by YOHEI INAI (@yohei_inai)
on CodePen.

※上記のサンプルコードでの表示にて、一部のブラウザやOSの種類によって、正常に表示されていない可能性があります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

ページ全体のフォントを指定してみよう

以下、ページ全体のフォントの種類を既存のフォントの種類から変更するためのサンプルコードです。「Webフォント」であるGoogle fontの一例に説明します。まず、headタグの内部に以下の記述を追加します。

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP|Open+Sans&display=swap" rel="stylesheet">

次に、 htmlタグ、もしくは、bodyタグに、フォントの種類を指定することが必要です。以下、「Webフォント」であるGoogle fontを使用した一例のサンプルコードです。

See the Pen
2020-03-23-sample16 by YOHEI INAI (@yohei_inai)
on CodePen.

上記の他にも、ページ全体のフォントを華やかに彩れる沢山のWebフォントがあります。

https://fonts.google.com/

息抜きも兼ねましてから、ご自身にとっての好みのWebフォントも探してみましょう。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLの文法チェックツールを使って正しくコーディングする方法を現役デザイナーが解説【初心者向け】

HTMLの文法チェックツールについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTM...
HTML

HTML5で定義された擬似クラスを現役デザイナーが解説【初心者向け】

HTML5で定義された擬似クラスについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】

ここでは、HTMLの入力フォームに必要な送信ボタンの設置方法について解説していきます。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方...
HTML

HTMLで同じname属性を配列で受け取る方法を現役エンジニアが解説【初心者向け】

HTMLで同じname属性を配列で受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLで画像を画面サイズに合わせて表示する方法を現役デザイナーが解説【初心者向け】

HTMLで画像を画面サイズに合わせて表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのフォルダ・ディレクトリ構造を現役エンジニアが解説【初心者向け】

HTMLのフォルダ・ディレクトリ構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nbs...
HTML

あわせてよく読まれている記事

サイトの印象を変える！CSSでフォントを指定する方法【初心者向け】

今回はCSSでフォントを指定する方法を説明します。 フォント一つでサイトの印象が大きく変わるので、非常に重要な知識になります。実際の業務でも必ず必要になるので、覚えておきましょう。 そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！段落や見出しで使うフォントの種類を変更したいのですが、どうすればいいですか～？ 田島悠介 フォントの変更にはfont-familyプロパティを使うよ。 大石ゆかり 値には何を指定したらいいんですか？ 田島悠介 フォント名で指定する方法と、種類ごとに決まったキーワードによって値を指定する方法があるよ。それぞれの書き方を見てみよう。   目次 フォントを指定する書き方 実際にフォントを指定してみよう   フォントを指定する書き方 実際にCSSでフォントを指定する方法を説明していきます。 フォントの指定には「font-family」というプロパティを使います。また、フォントの指定には「フォントファミリ名」で指定する方法と「総称ファミリ名」で指定する方法があります。   まず、フォントファミリ名での指定方法を説明します。 p{ font-family: "MS Pゴシック"; } 上記のように書くことでフォントを指定することができます。 フォントの指定もWebページのコーディングにおいて大事な要素の一つになります。 また、総称ファミリ名で指定する方法では、次の5種類で指定することができます。 「sans-serif」 ・・・ ゴシック体系のフォント 「serif」 ・・・ 明朝体系のフォント 「cursive」 ・・・ 筆記体系のフォント 「fantasy」 ・・・ 装飾系のフォント 「monospace」 ・・・ 等幅系のフォント   また、候補としていくつか設定することができます。 font-family: 候補1,候補2,候補3; 上記のように”,”(カンマ)で区切って複数の候補を設定することで、候補1が使えない時、候補2のフォントを適用します。候補2が適用できない時は候補3を適用し、それを繰り返します。 フォントファミリ名を使ってもいいですが、候補の最後には総体ファミリ名を指定しましょう。 また、「cursive」を指定して日本語のテキストを表示しようとすると、一部環境ではそのテキストが正常に表示されないこともあるようです。 上記のように、利用者の各環境で正常に動作しないことも想定してコーディングしていきましょう。   田島悠介 font-familyの基本の書き方になるよ。 大石ゆかり 候補は複数指定することもできるんですね。 田島悠介 次は実際にフォントを変更して、ブラウザで確認してみよう。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際にフォントを指定してみよう 実際にコードを書いてみましょう。 HTML <!DOCTYPE html> <html> <head>     <meta charset="utf-8"> <title>CSS フォント</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <p class="font1">fantasy</p> <p class="font2">serif</p> </body> </html>   CSS p.font1{ font-family: fantasy; } p.font2{
CSS

fontタグの使い方！HTMLでフォントサイズを指定する方法【初心者向け】現役Webデザイナーが解説

HTMLでフォントサイズを指定する方法について解説しています。 初心者でも簡単にフォントサイズや色を指定できるので、ぜひ書き方を覚えておくと良いでしょう。 目次 fontタグとは フォントカラーの指定方法 フォントサイズの指定方法 フォントの指定方法 実際に書いてみよう   fontタグとは fontタグは、HTMLの要素で文字の色やサイズやフォント(書体)の種類を指定するタグです。 文字の色は指定しない場合、黒(ブラック)になります。 fontタグでは、文字のサイズを1から7までの相対的な数値で変更できます。   フォントの指定とは広く書体と同じ意味で用いられるもので、美的感覚に基づき、字体を統一的にデザインした文字のスタイルのことを指します。 角ばったゴシック体のフォントや細長い明朝体などがあります。 文字そのものの形のデザインといったところです。 ※HTML5でfontタグは廃止されたため、今後ブラウザの新しいバージョンになった場合、動作しなくなる可能性があります。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中フォントカラーの指定方法 文字の色をfontタグで指定するには、fontタグにcolorの属性を追加して値を指定します。 font color="red" font color="#226666" 色の指定方法には、#(ハッシュ)から始まる6桁のカラーコードで書く方法と、redやblueやwhiteやorangeというふうに直接、カラーネームを書く方法があります。   カラーコードは16進数で0から9、そしてaからfまでの数値を指定できます。 これは2桁ずつRGB(レッド・グリーン・ブルー)という光の三原則の割合になっています。 #ff0000とした場合、赤色になります。 #00ff00は緑色です。 fontタグでの文字色指定の置き換え方は、HTMLタグで文字色を自由に指定する方法で紹介されていますので、ご参考にしてください。   フォントサイズの指定方法 文字のサイズをfontタグで指定するには、fontタグにsizeの属性を追加して1から7の値を指定します。 font size="7" 3が通常の文字の大きさになります。 fontタグでのフォントサイズの置き換え方は、HTMLのフォントサイズで最大値・最小値を指定する方法で紹介されていますので、ご参考にしてください。   フォントの指定方法 文字のスタイルをfontタグで指定するには、fontタグにfaceの属性を追加してフォントを指定します。 フォントは複数指定することができて、先頭のフォントから優先され、カンマ区切りで記述していきます。 font face="候補1,候補2,候補3"   フォントを指定しても、その人の端末にフォントがインストールされていなければ、フォントは表示されません。 最後の方で共通の一般的なフォントを指定するようにします。 fontタグでのフォント指定の置き換え方は、CSSでfont-familyを使ってフォントを指定する方法で紹介されていますので、ご参考にしてください。   実際に書いてみよう fontタグを実際に使用してみます。 sample.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> 色もサイズもフォントも指定していない通常の文字<br> <font size="5" color="#00ff00">大きさ5とカラーコードで緑色を指定した文字</font><br> <font color="green">カラーネームで緑色を指定した文字</font><br> <font size="5" face="impact">impactという英字専用フォントを指定した文字</font><br> <font face="ＭＳ Ｐ明朝,ＭＳ 明朝">明朝体を指定した文字</font><br> <font face="ＭＳ Ｐゴシック,ＭＳ ゴシック">ゴシック体を指定した文字</font><br>
HTML

CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。   本記事は、TechAcademyのWebデザインオンライン講座のCSSのカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回はfont-familyプロパティについて解説しよう。 大石ゆかり 田島メンター！！font-familyは何をするんですか～？ 田島悠介 文字のフォントを指定するプロパティなんだ。値で示されたフォントが文字列に適用されるよ。実際の例で見てみよう。 大石ゆかり 分かりました！   font-familyとは CSSのfont-familyプロパティを使用することによって、文字列のフォントを指定することができます。Webページを見せる際のフォントを指定したい場合は設定しましょう。   事前準備 事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。 ぜひ自分のPCでもやってみましょう。   HTMLファイル： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1">ここに文章を表示</p> </body> </html>   [PR] HTML/CSSで挫折しない学習方法を動画で公開中font-familyを使う 使い方は簡単で、「font-family:」のあとに指定するフォントを記述するだけです。 例えばこのようになります。sans-serifはゴシック体のことです。 p.sample1 {font-family:sans-serif; } ブラウザで表示させると、このように文字列がゴシック体で表示されています。   田島悠介 値に”sans-serif”を入力したことで、文字列にフォントが適用されたよ。 大石ゆかり この部分によってフォントの種類が変わるんですね。 田島悠介 そうだね。値を変更してもう一度画面で確認してみよう。   今度は明朝体の「serif」にしています。先ほどの、sans-serifの部分をserifに変えるだけです。 p.sample1 {font-family:serif; }   ブラウザで表示させると、明朝体になりました。     また、フォントの指定は”MS 明朝”というようにフォントの「名称」で指定することもできます。 この際に名称を””などの引用符で囲んで入力します。ここでは「メイリオ」のフォントを指定しています。 p.sample1 {font-family:"Meiryo"; }   先ほどのようにブラウザ上ではメイリオのフォントになりました。     font-familyの書き方について注意点 font-familyの書き方について注意点です。これらのフォントを表示させるためには、作成者ではなく閲覧者のPCに該当のフォントがインストールされている必要があります。また、WindowsとMacではインストールされているフォントが異なるため、注意が必要です。 もしも閲覧者側に該当のフォントがなかった場合のために、あらかじめ次に表示させる候補を用意することができます。 その場合は下記のように記述します。 font-family: 候補1,候補2,候補3,フォントの種類; 「,(カンマ)」を入れる形で指定しておくと、候補1のフォントがなかった場合は候補2、候補2もなかった場合は候補3というようにフォントが決まっていきます。 また、英語フォントと日本語フォントの両方を指定する場合は、先に英語フォントを指定します。そうすることで、アルファベットには英語フォントが、日本語には日本語フォントが使用されるようになります。 最後の「フォントの種類」とは、指定した全てのフォントがインストールされていなかった場合に使用されるキーワードです。以下の中から指定できます。 フォントの種類 使用されるフォント serif 明朝体系フォント sans-serif ゴシック体系フォント cursive 筆記体系フォント fantasy 草食系フォント monospace 等幅系フォント   具体的な記述方法はこちらです。 p.sample1 {font-family: "游ゴシック","arial unicode ms",sans-serif;} すると、「游ゴシック」がインストールされていないPCでは、2つ目に指定していた「arial unicode ms」が、両方インストールされていないPCでは、PCにインストールされているフォントの中からゴシック体系のフォントで文字列が表示されます。   font-familyの書き方の例 最後に、実際に使われている、font-familyの書き方の例をいくつか見ていきましょう。 ※ブラウザはchrome、言語は日本語で確認した例です。 Google https://www.google.co.jp/ font-family: arial, sans-serif;   Twitter https://twitter.com/ font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ
CSS

HTMLのフォントサイズで最大値・最小値を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズで最大値・最小値を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 フォントサイズで最大値・最小値を指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 HTMLでフォントサイズを指定する方法 レスポンシブでのフォントサイズの違いについて フォントサイズの最大値と最小値を指定してみよう まとめ   HTMLでフォントサイズを指定する方法 HTMLでフォントサイズを指定するにはfont-sizeプロパティを使用します。 font-size: 値; 値にはpxやrem、vw、%など様々な単位を指定することが出来ます。font-sizeプロパティについて、詳しくは以下の記事も参考にしてください。 MDN – font-size   [PR] HTML/CSSで挫折しない学習方法を動画で公開中レスポンシブでのフォントサイズの違いについて スマートフォンなどで画面サイズ小さくなるとフォントサイズも相対的に小さくしたい場合があります。このような場合、ベースとなるフォントサイズを定義しておき、メディアクエリを使用してフォントサイズを調整すると良いでしょう。 以下はベースとなるフォントサイズを36pxで定義しておき、画面幅が640以上の環境で48pxに調整する例です。 h1 { font-size: 36px; } @media (min-width: 640px) { h1 { font-size: 48px; } }   フォントサイズの最大値と最小値を指定してみよう 今回のサンプルプログラムではフォントサイズの大きさを画面サイズで調整する方法について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> h1 { font-size: 36px; }
HTML

HTMLでemでフォントサイズを指定する方法を現役エンジニアが解説【初心者向け】

HTMLでemでフォントサイズを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 emでフォントサイズを指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 フォントサイズをCSS内で指定する方法 様々な単位と注意点 em単位を使ってフォントサイズを指定してみよう   フォントサイズをCSS内で指定する方法 フォントサイズを指定するにはhtmlファイル内の要素をidやclassなどでタグ付けし、外部ファイルであるcssファイルで大きさの指定する方法が汎用性もあり、間違いのない方法です。 hタグはh1からh6までありそれぞれ大きさが変わります。 こちらのタグは見出しやタイトルとして使うべきであり、大きさを変えるために使用するのはよくありません。 各要素ごとの文字サイズを変える場合にはfont-sizeで大きさを調整するようにしていきます。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中様々な単位と注意点 フォントサイズの単位には多くの種類が存在します。 「px」はピクセルを１とする単位です。 ピクセルは画素数に対しては変化はありますが画面に対する見え方は同じです。 1pxで表示した文字はmm単位で同じ大きさになるわけではなく、パソコンやタブレット、スマホなどで同じ画面を表示した場合にはその画素に応じた大きさとして表示され、ピクセル指定した文字サイズは画面に対して同じ見え方になるでしょう。   「％」は割合でパーセントの割合で大きさ表示が変わり、パーセントはピクセルを元に割合計算がされることになります。 通常ブラウザでは16pxの文字サイズで表示され、何も表示しない場合には16pxで表示されます。 これはfont-size:100%で指定した場合と同じです。   文字サイズを10pxのサイズで表示する場合には、font-size:10pxとfont-size62.5%は同じになります。 １６（px）×０.６２５＝１０(px)   他には「rem」や「em」などがあります。 これらは親要素の大きさに対して文字サイズを指定する単位です。 remはhtmlの全体の要素と同じです。 html要素の文字サイズが１６pxだった場合には１remは１６pxです。 ３２pxの文字サイズで表示したい場合にはfont-size:２remと記述することになります。   em単位を使ってフォントサイズを指定してみよう emはremと似ています。 ルートであるhtml要素のサイズに対応するものではなく、親要素に対してのサイズの単位です。 今回はdiv要素で囲み親要素であるbox1クラスを１０pxと指定しました。 この場合は子要素の１emも親要素の１０pxと同じ表示になります。 (htmlファイル) <div class="box1"> <p id="test5">1emで表示</p> </div> <p id="test1">100%で表示</p> <p id="test2">10pxで表示</p> <p id="test3">62.5%で表示</p> <p id="test4">1remで表示</p> (cssファイル) .box1{ font-size: 10px; } #test1{ font-size: 100%; } #test2{ font-size: 10px; } #test3{ font-size: 62.5%; } #test4{ font-size: 1rem; } #test5{ font-size: 1em; }   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTMLでemでフォントサイズを指定する方法が分かりやすくて良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

【Webデザインに必須！】無料で使えるおしゃれなフォントまとめ！

お洒落で見やすいフォントの中から、無料で商用利用も可能なものをまとめました。 最近では記事を発信しているメディアも増えてきているので、よりフォントが重要になってきています。フォントひとつでサイトの印象を大きく変えるので、妥協せずに満足できるものを選びましょう。 (※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。)   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   フロップデザインフォント シンプルで使いやすいゴシック体フォント。文字が読みやすいように工夫してデザインされています。 フロップデザインフォント   ピグモ01 絵のようなユニークなフォント。第二水準漢字などにも対応しています。 ピグモ01   [PR] HTML/CSSで挫折しない学習方法を動画で公開中ほのかアンティーク角 アンチック体の、優しい雰囲気を持つフォントです。 ほのかアンティーク角   はれのそら明朝 明朝系のすっきりしたフォント。 はれのそら明朝   しねきゃぷしょん 洋画の字幕のような雰囲気を持つフォントです。 しねきゃぷしょん   刻ゴシックフォント 漢字に対してひらがなとカタカナが少し小さく縦長にデザインされたゴシックフォント。 刻ゴシックフォント   セプテンバー ペンで紙に書いた文字から作られた、やわらかい雰囲気を持ったフォント。 セプテンバー   櫻井幸一フォント　フェルトペン フェルトペンで書かれた手書き風のフォント。 櫻井幸一フォント　フェルトペン   刻明朝フォント 「刻ゴシックフォント」の明朝体版。クラシックな雰囲気が特徴です。 刻明朝フォント   刻丸明朝かな 「刻明朝フォント」のひらがなとカタカナだけを少し丸みのあるデザインにアレンジしたもの。(漢字は含まれていません) 刻丸明朝かな   なごみ極細ゴシック 漢字は直線的に、かなは曲線的にデザインされたフォント。 なごみ極細ゴシック   超極細ゴシック体 とても細いゴシック体のフォントです。 超極細ゴシック体   青梅ぷらすゴシックP シンプルでやわらかい雰囲気のゴシック体フォント。 青梅ぷらすゴシックP   ほのか丸ゴシック 漢字より少しだけかな表記を小さくした丸ゴシック体フォントです。 ほのか丸ゴシック   明朝體フォント むつき 古い本の活字のような独特の明朝体フォント。 明朝體フォント むつき   小瑠璃フォント 丸めデザインのすっきりしたフォント。 小瑠璃フォント   851手書き雑フォント 手書き風のフォント。絵文字や各種外国語にも対応しています。 851手書き雑フォント   ロゴたいぷゴシック-コンデンスド 少し縦長にデザインされたゴシック体フォント。 ロゴたいぷゴシック-コンデンスド   こころ明朝体 角丸の明朝体フォント。やさしい雰囲気を持っています。 こころ明朝体   うつくし明朝体 横書きの見栄えを意識したオールド系明朝体フォント。 うつくし明朝体   以上、サイトの見栄えがおしゃれに見えるフォントを紹介しました。 明朝体ひとつとっても様々な種類のフォントが存在します。ぜひいろいろ見てサイトに活用してみてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

TechAcademyから
現役エンジニアの方へ
お知らせ

藤門千明
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのページ全体をフォント指定する方法を現役デザイナーが解説【初心者向け】