Webフォントの使い方【Google Fonts】【Adobe Fonts】
更新：2022/01/19
Webフォント読込中
※使用Webフォント：押出Mゴシック、RocknRoll One
フォント装飾 「【CSS】文字装飾のサンプル集 25選」
フォント装飾 「【CSS】文字装飾のサンプル集 25選」
Webフォントとは
カッコイイフォントを使いたい！！
Webフォントとは、
インターネットで配布されているフォントのことで、
様々な会社から、有料・無料のフォントが提供されています。無料で利用できる「
Fonts」や
「
Fonts」のフォントのご紹介と、導入方法についてまとめました。-補足-
フォントを指定しない場合、ブラウザ毎の標準フォントが自動的に選ばれます。
ブラウザの標準フォントの確認方法は他サイト 「ブラウザの標準フォントを変更するには？」で書かれています。
例文：
「例文」に文字を入力して「反映」を押すと、Webフォントの例文に反映されます。
Fonts
| フォント名 | 例文 |
|---|---|
| 解星オプティ | abcdeあいうえお |
| 解星デコール | abcdeあいうえお |
| 解星春の海 | abcdeあいうえお |
| 解星特ミン | abcdeあいうえお |
| Dela Gothic One | abcdeあいうえお |
| Hachi Maru Pop | abcdeあいうえお |
| Hina Mincho | abcdeあいうえお |
| Kiwi Maru | abcdeあいうえお |
| Klee One | abcdeあいうえお |
| Kosugi | abcdeあいうえお |
| Kosugi Maru | abcdeあいうえお |
| M PLUS Rounded 1c | abcdeあいうえお |
| M PLUS 1p | abcdeあいうえお |
| Murecho | abcdeあいうえお |
| New Tegomin | abcdeあいうえお |
| Potta One | abcdeあいうえお |
| Yomogi | abcdeあいうえお |
| Yuji Boku | abcdeあいうえお |
| Yuji Mai | abcdeあいうえお |
| Yuji Syuku | abcdeあいうえお |
| Zen Antique | abcdeあいうえお |
| Zen Antique Soft | abcdeあいうえお |
| Zen Kaku Gothic Antique | abcdeあいうえお |
| Zen Kaku Gothic New | abcdeあいうえお |
| Zen Kurenaido | abcdeあいうえお |
| Zen Maru Gothic | abcdeあいうえお |
| Zen Old Mincho | abcdeあいうえお |
Fonts
| フォント名 | 例文 |
|---|---|
| いろは角クラシック | abcdeあいうえお |
| いろはマルみかみ | abcdeあいうえお |
| いろはマル | abcdeあいうえお |
| 瀬戸フォントSP | abcdeあいうえお |
| モッチーポップ | abcdeあいうえお |
| 押出Mゴシック | abcdeあいうえお |
| こども丸ゴシック | abcdeあいうえお |
| Oradano Mincho Grss | abcdeあいうえお |
| タイムマシンわ号 | abcdeあいうえお |
| せのびゴシック | abcdeあいうえお |
| 黒薔薇ゴシック | abcdeあいうえお |
| ロンドBスクウェア | abcdeあいうえお |
| otomanopee-one | abcdeあいうえお |
| みちます | abcdeあいうえお |
| めもわーる | abcdeあいうえお |
| まなびやーさくら | abcdeあいうえお |
| マメロン | abcdeあいうえお |
| マキナス4 flat | abcdeあいうえお |
| マキナス4 square | abcdeあいうえお |
| 廻想体 ネクスト UP B | abcdeあいうえお |
| 異世明 | abcdeあいうえお |
| 異世ゴ | abcdeあいうえお |
| 源界明朝 | abcdeあいうえお |
| ほのか丸ゴシック | abcdeあいうえお |
| ほのかアンティーク丸 | abcdeあいうえお |
| Kinto Sans | abcdeあいうえお |
| Yusei Magic | abcdeあいうえお |
| Stick | abcdeあいうえお |
| コーポレート・ロゴ var2 | abcdeあいうえお |
| さわらび明朝 | abcdeあいうえお |
| さわらびゴシック | abcdeあいうえお |
| しっぽり明朝 | abcdeあいうえお |
| Rampart One | abcdeあいうえお |
| Train One | abcdeあいうえお |
| RocknRoll One | abcdeあいうえお |
| DotGothic16 | abcdeあいうえお |
| Reggae One | abcdeあいうえお |
| 貂明朝 | abcdeあいうえお |
| トガリテ | abcdeあいうえお |
| 棘薔薇 | abcdeあいうえお |
おすすめのフォント
貂明朝（てんみんちょう）
Klee One（クレーOne）
Zen Kurenaido（Zen紅道）
Kaisei Opti（解星オプティ）
メリットとデメリット
ブラウザやOS（WindowsやMacやAndroid）に関係なく 美しいデザインのフォントを表示することができる。
デメリット
フォントデータを読み込む必要があるため、文字数が多くなると、 ホームページの読み込み時間が長くなる。
Google Fonts の利用方法
① 「Google Fonts」にアクセスします。
②フォントの言語を選択して絞込みします。
例）本文全体にWebフォントを反映したい場合は「body{ font-family: 'Kaisei Opti', serif; }」と記述。
Adobe Fonts の利用方法
アカウント登録（メールアドレス）が必要です。
① 「Adobe Fonts」にアクセスします。
②アカウント登録します。
Webフォントのスタイル（の下赤枠）をホームページのCSSに記述します。
例）本文全体にWebフォントを反映したい場合は「body{ font-family: ten-mincho, serif; font-weight: 400; font-style: italic; }」と記述。
お読み頂きありがとうございます。