| Google Fontsの使い方とおすすめ日本語フォント | 您所在的位置：网站首页 › googlefont商业 › Google Fontsの使い方とおすすめ日本語フォント |
Google Fontsの使い方とおすすめ日本語フォント
Google Fontsの使い方とおすすめ日本語フォント
Webフォント
2022/04/04
2023/01/22
2018年9月に日本語フォントが正式にサポートされ、ますますGoogleフォントを利用するユーザーが増加しました。Google Fontsは900種類以上のフォントを無料で利用することができます。今回は、Webフォントだけでなくダウンロードも可能なGoogleフォントの使い方と、おすすめの日本語フォントを紹介します。
目 次 Googleフォントの使い方 Google Fontsへアクセス フォントを検索する フォントを選択する コードを貼り付ける Googleフォントのダウンロード方法 フォントを検索する フォントをダウンロードする 日本語のGoogleフォント Noto Sans JP BIZ UDPGothic M PLUS 1p Kosugi Kosugi Maru Kiwi Maru Dela Gothic One Kosugi DotGothic16 Noto Serif Japanese BIZ UDPMincho Shippori Mincho Hina Mincho Klee One Yomogi Yusei Magic Hachi Maru Pop New Tegomin Kaisei Decol RocknRoll One Reggae One Potta One Stick Train One
Googleフォントとは
Google Fontsは2010年にリリースしたGoogleが提供する、無料で利用可能ななフォントのディレクトリーサービスです。Googleのサーバーからフォントデータを読み込んでWebページにフォントを表示できるWebフォントで世界各国で利用されています。 日本語フォントについて日本語フォントを使用できることは便利なことですが、デメリットもありますので理解しておきましょう。 日本語フォントは英語フォントより文字数が多いのでファイルサイズも大きくなります。英文フォントですとアルファベット・英数・記号合わせて100文字程度ですが、日本語はひらがな・カタカナ・英数・記号、漢字でJIS第1水準漢字だけでも2,965文字あります。表示速度の面でも日本語フォントを複数使用することは避けた方がよいでしょう。また、日本語フォントは太さ(ウエイト)が何種類か用意されてますが、全種類選択すると読み込み速度が遅くなるので注意が必要です。 Googleフォントの使い方 1Google Fontsへアクセス まずはGoogle Fontsページにアクセスしましょう。Googleフォントはユーザー登録の必要がなく無料で利用することができます。 
Google Fonts
2フォントを検索する フォント検索はページ上部エリアの検索機能を使って目的のフォントを検索します。 
Categories
Serif
明朝体
Sans Serif
ゴシック体
Display
ディスプレイ・装飾書体
Handwriting
手書き風書体
Monospace
等幅書体（文字幅がすべて同じ）
Languages
日本語フォントを検索したい場合は、LanguagesのプルダウンメニューからJapaneseを選択します。 
Font properties
Number of styles
文字のスタイル数
Thickness
文字の太さ
Slant
文字の傾斜
Width
文字の幅
Show only variable fonts
チェックを入れるとvariable fontsのみが表示されます。variable fontsとは1つのフォントファイルで文字の太さ(ウェイト)を可変できるフォントのことをいいます。日本語のvariable fontはありません。 
Sort
Trending
トレンド(流行)順
Most popular
人気順
Newest
新着順
Name
アルファベット順（フォント名）
3フォントを選択する 目的のフォントをクリックすると、フォント詳細ページに遷移します。 
使用したいフォントの右にあるSelect this styleをクリックすると、右エリアのSelected familiesにフォントが追加されます。複数のフォント・スタイルを選択することもできます。 
4コードを貼り付ける Selected families内にcssへのリンク・記述方法が表示されるので、linkの上段に表示されているコードをhead内へ貼り付け、下段のfont-familyを反映させたいCSSに追加します。CSS内に記述する場合は@importをクリックして表示されたコードをコピペします。 
html
CSS
.font01{
font-family: 'Noto Sans JP', sans-serif;
}
CSSから読み込ませる場合は@IMPORTに表示されるコードをコピーして貼り付けてください。 CSS @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');以上で、比較的簡単にGoogleフォントをサイト・ブログに反映させることができます。英語フォントも数多く提供されているので自分のサイトに合うフォントを探してみてください。 Googleフォントのダウンロード方法 GoogleフォントはダウンロードしてPCで使用することも可能です。ここではGoogleフォントのダウンロード方法を解説します。 1フォントを選択する Googleフォントにアクセスし、ダウンロードしたいフォントをクリックすると、フォント詳細ページに遷移します。
2フォントをダウンロードする ダウンロードしたいフォントの右にあるSelect this styleをクリックし、Download familyをクリックするとフォントをダウンロードします。 
Google Fontsのライセンスについては、英文ですが以下のページに記載されてますのでご覧ください。 Google Fonts Files
日本語のおすすめGoogleフォント Googleフォントの日本語フォントは当初は6種類のみでしたが、現在では57書体(2022年4月現在)となっています。2021年にフォントワークス、2022年にはモリサワのユニバーサルフォントが提供され、使用できるフォントの幅も広がりました。 Noto Sans JPを中心にWebサイトで使用している例も多く見かけますが、ゴシック体・明朝体の他にも特徴のあるデザインフォントがありますので用途によって使い分けしてみましょう。数ある日本語フォントからおすすめのGoogleフォントを紹介します。 ゴシック体フォント 1Noto Sans JP 
GoogleとAdobeが共同開発し、2014年にリリースされたオープンソースの日本語フォント。ウェイトは6種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Noto Sans JP 2BIZ UDPGothic
モリサワの読みやすく使いやすいように設計されたユニバーサルデザインフォント。ウェイトは2種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 BIZ UDPGothic 3M PLUS 1p
フリーフォントで有名なM+ FONTSのWebフォント版。漢字は直線的で、仮名は丸みのあるドッシリとした日本語フォント。ウェイトは7種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 M PLUS 1p 4Kosugi
フォントサイズを変更しても読みやすいフォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Kosugi 5 M PLUS Rounded 1c
M PLUS 1pフォントの丸ゴシック体。ウェイトは7種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 M PLUS Rounded 1c 6Kosugi Maru
Kosugiフォントの丸ゴシック体。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Kosugi Maru 7Kiwi Maru
マメロンフォントをベースに文字側部分を少し丸めた加工したキウイ丸フォント。ウェイトは3種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Kiwi Maru 8Dela Gothic One
横長でどっしりした太いゴシック体フォントのデラゴシック。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Dela Gothic One 9DotGothic16
ドットで構成されたデジタル風デザインフォント。ウェイトは1種 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 DotGothic16明朝体フォント 1Noto Serif Japanese 
Noto Sans JPと同様の明朝体。ウェイトは7種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Noto Serif Japanese 2BIZ UDPMincho
モリサワの読みやすく使いやすいように設計されたユニバーサルデザインフォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 BIZ UDPMincho 3Shippori Mincho
うっとりするような明朝体を目指して制作した、オールドスタイル明朝体。ウェイトは5種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Shippori Mincho 4Hina Mincho
ひな明朝は古風でかわいらしく品のある雛人形をイメージした明朝体フォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Hina Mincho手書風フォント 1Klee One 
鉛筆やペンなどを使って書いた手書き風文字のような印象を与える楷書系硬筆体フォント。ウェイトは2種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Klee One 2Yomogi
極細で個性が強く、それでいて可読性の高い手書き風フォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Yomogi 3Yusei Magic
油性マジックで手書きしたようなデザインフォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Yusei Magic 4Hachi Maru Pop
70～80年代に流行った丸文字をイメージしたキュートな丸ゴシック体。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Hachi Maru Pop 5New Tegomin
手書き明朝体フォント「テゴミン」の更新版。手書きのゆらぎ感と明朝体の整然とした佇まいを掛け合わせたフォントを目指し作成されたフォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 New Tegominデザインフォント 1Kaisei Decol 
解星デコールは右払いやハネに星(ドット)を配置した、やわらかいイメージのデザインフォント。ウェイトは3種 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Kaisei Decol 2RocknRoll One
丸い点が特徴的なポップなデザインフォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 RocknRoll One 3Reggae One
アプリやコミックでも使えそうなシャープでポップなデザインフォント。ウェイトは1種 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Reggae One 4Potta One
ゴシック体を崩したポップな筆文字風フォント。ウェイトは1種類 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Potta One 5Stick
棒(スティック)のように直線で表現されたデザインフォント。ウェイトは1種 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Stick 6Train One
アウトラインの内側と外側のラインで形成されるゴシック系フォント。ウェイトは1種 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Train One
日本語フォントは比較的数が少ないので、比較しやすいですが、英語となると900種類以上の中からフォントを検索しなければなりません。そんな時はアナリティクスページで人気の高いフォントをチェックすることができます。 
Google Fonts -Analytics-
これまで試験的に公開されていたGoogle Fonts+日本語早期アクセスも、まだ公開されているので参考までにチェックしてみてください。Webサイトのタイトルや見出しにGooglefontを使用することでデザインの幅も広がりますので、興味のある方は導入してみてはいかがでしょうか。以上、Googleフォントの使い方でした。
漢字が使えるおすすめの日本語フリーフォントまとめ
design.webclips.jp/japanese-free-font-vol01/ ＼ Webデザインに関するお役立ち情報を定期的に配信中 ／ Follow @webclips_jp プライス・値段表示などに使えそうな英数字フォント13選 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォント26選 スタイリッシュでおしゃれな細字フリーフォント17選 無料で使える日本語・英語のかわいいフリーフォント20選 イメージワードを選択するだけでフリーフォントを簡単に検索できる「モジザイ」 WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け ) 無料で使えるフリーイラスト素材サイト（商用利用可） 無料で使用できるフリー画像・写真素材サイト（国内/海外） Webデザインの参考サイト | Web Design Clip - Webデザインクリップ - LP・ランディングページの参考サイト | Web Design Clip [L] WordPressの使い方を分かりやすく解説 【初心者向け】
 おすすめのホームページ作成サービス【無料版・有料版】
 Google Fontsの使い方とおすすめ日本語フォント
 Adobe CC(Creative Cloud)を安く買う方法
 Photoshopの代替になる画像編集・加工ツール
 WordPressのおすすめテーマ（無料版/有料版）
前のページ
次のページ
|
【本文地址】