最近企業のホームページや、ブログでもWebフォントを使用しているサイトを見かけることが多くなりました。
というのも、Webフォントはユーザーの環境を問わず同じ状態で表現をしてくれるので、なんと言ってもトータルデザインでは必須と言えると思います。
かくゆう自分も、Webフォントはたくさん使ってます
このWebフォントですが、有料で利用できるものをはじめ、無料で利用できるものがあります。その中でも無料で使えて、簡単に導入できる「Google Fonts」のGoogleフォントは使い勝手が良く、非常にオススメです。
そんなGoogleフォントについて、この記事では
- Googleフォントとは？
- Googleフォントの導入方法。
- 利用できるフォント全種類のオススメポイント
の内容です。是非この記事を参考に、Googleフォントを使いこなしてみてください。
目次
Googleフォントとは？
Googleフォントは、Webフォントを無料で提供しているサービスで、記事執筆時点で1052種類のフォントを、このGoogleフォントから探して利用することができます。しかも商用利用にも対応しています。
Googleフォントを利用するには、各フォントのページからダウンロードしてそれを利用することができます。また、<link>タグを使う方法、@importを使う方法のいずれもHTMLかCSSに一文を追記するだけで利用することができてしまいます。
気軽に導入できるのでめっちゃ便利です。
外部リンク Google Fonts
Googleフォントの導入方法
Googleフォントは、HTMLとCSSにそれぞれコピペするだけで導入できてしまう簡単仕様です。使いたいフォントを探すところから導入まで、たった3つのSTEPで導入可能なので説明はいらないかもしれませんが、念の為です。
「そんなの知ってるよ」的な場合は、ここを読み飛ばして続きをご覧ください。
今のところ、Googleフォントには1052種類のフォントが利用できるようになっています。その内日本語のフォントは現在21種類です。まず初めに、その中から使用したいフォントを見つけましょう。
使いたいフォントをクリックすると、フォントスタイルの一覧が表示されます。
使用したいフォントをクリックすると、文字の太さが選べるので、 font-weight の好みのスタイルの右側にある「+ Select this style」を選択します。
選択されると、右側の表示が「- Remove this style」へ表示が変わります。
さらにフォントのスタイルを追加する場合、さらに「+ Select this style」をクリックすると、右側にウィンドウが開かれ他のスタイルも追加することができます。
右側の「Use on the web」に表示されるコードをコピペします。
linkコードはhtmlのheadタグ内のどこかに、font-familyタグはcssに貼り付けます。
通常はlinkの方で問題無く、この記事でもlinkの方法で紹介しています。
もしくは、CSSから読み込む場合、@importを選択して表示されるコードをコピーしてCSSファイルに貼りつけましょう。
以上で完了です。
WordPressのテーマで読み込む場合
WordPressの使用しているテーマでGoogleフォントを読み込む場合は、以下の手順で設定します。
設定は以下の手順で実装可能ですが、functions.phpに間違った記述を行うと全ての画面表示が真っ白になったりするので注意しましょう。
Googleフォントの中から、使用したいフォントを選んで選択しましょう。選択できたら右側の「Use on the web」のlinkに表示される、https://fonts.googleapis.com〜〜〜コードをコピーします。
コピーしたコードは、次のSTEPのfunctions.phpで使用します。
以下のコードとSTEP1でコピーしたフォントのコードを一緒にして functions.php 内にコピペしましょう。コピペする場所は、functions.php の一番下に記載すればOKです。
function google_font_scripts() {
wp_enqueue_style( 'google-web-style', 'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'google_font_scripts' );上記の中の「https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap」の場所に、STEP1でコピーしたコードを貼り付けします。
最後に、使用したいフォントをCSSファイルに記述します。
Googleフォントの右下に表示される「CSS rules to specify families」をコピーして、WordPressの【外観】→【カスタマイズ】を選択し、その中の追加CSSを選択するとCSSが編集できるので、そこにfont-familyを追加して、fontを変更します。
サイト全体にGoogleフォントを適用させる場合
body {
font-family: 'Noto Sans JP', sans-serif;
}本文の見出しのみにGoogleフォントを適用させる場合
h2 {
font-family: 'Noto Sans JP', sans-serif;
}上記は一例です。サイト内でGoogleフォントを何に適用させるのかは環境に合わせて変更して記入しましょう。
ゴシックのGoogleフォント
ここからGoogleフォントのそれぞれについてです。
まずは、縦横の太さが均等でベーシックなゴシック体のフォントで、
上記のように、それぞれのフォントを適応させたときの表示例を掲載しているので、参考にご覧ください。
Noto Sans JP
とりあえずNoto Sans。というnoteの記事があるぐらいで、企業のサイトでも普通に使われているのを多く見かけるほど、超メジャーなフォントです。
当サイトでも利用しているWordPressテーマSANGOでも、メニュー画面から選択するだけでこのNoto Sans JPに切り替えることができます。
Noto Sans JPは、本当にいい意味で癖がなく、読みやすさ・使いやすさ共に言うことがないフォントで、新ゴやら他のゴシック系デザインとの相性も抜群に良いです。
他のゴシック系フォントで作ったバナーとも相性がいいので、本当使いやすいです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="stylesheet">font-family: 'Noto Sans JP', sans-serif;Kosugi
KosugiもNoto Sansと同じく使いやすい・見やすいフォントです。日本語を文章にして並べて見てみると、横幅が綺麗に揃った等間隔なので非常に見やすい印象です。
またフォント自体の線がしっかりしているので、遠巻きで見た時もきちんと主張してくれるフォントです。
font-weight をいじらなくても、白抜きの文字として使う時に活躍してくれそうなフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">font-family: 'Kosugi', sans-serif;Sawarabi Gothic
さわらびゴシックは、ブログなどの文字主体のサイトで、段落同士の余白と文字間を適度に緩めにとると、非常にいいなと思ったフォントです。
使える文字も、通常よく使う第一水準漢字も全て使えるので全く不自由なく使えるフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">font-family: 'Sawarabi Gothic', sans-serif;丸ゴシックのGoogleフォント
続いて丸ゴシックです。通常のゴシックとは異なり、可愛らしさというか、親しみやすさを出せるフォントでです。
M PLUS Rounded 1c
M PLUS Rounded 1cは、M+ OUTLINE FONTS というオープンソースのフォントをベースにして、作成された丸ゴシック体です。
M PLUS FONTSシリーズは、ほとんどの漢字が使え、そこまでゴリゴリの丸みのあるあしらいではないので、非常に使いやすいフォントだと思います。
かなり丸みが強すぎると逆に使いづらいですが、このM PLUS Rounded 1cはいい塩梅です。
1cはM+の文字のデザインの種類の1つで、仮名のふところが大きくて欧文がやや丸いものを指します。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&display=swap" rel="stylesheet">font-family: ‘M PLUS Rounded 1c’, sans-serif;M PLUS 1p
M PLUS 1pは、手描き感のある曲線を持っているフォントです。
M PLUS Rounded 1cと似ているますが、文字の端の処理に丸みを抑えていないので、どちらかと言えば、M PLUS 1pの方がフォーマルでビジネスでも使えるフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">font-family: 'M PLUS 1p', sans-serif;Kosugi Maru
小杉丸ゴシックは、1950年代から始まり現在に至っている、由緒正しいモトヤフォントの書体です。
モトヤフォントは、自分がデザイナー駆け出しの頃によくお世話になった定番のフォントです。
モトヤフォントが使われているもので有名なところでいうと、任天堂ＤＳの
「漢検シリーズ」のゲームや、地図検索サービス「Mapion」など、見易さが定評のあるフォントです。
この小杉丸ゴシックも例に漏れず、丸みのある親しみやすさと見た目の美しさのあるフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">font-family: 'Kosugi Maru', sans-serif;Kiwi Maru
キウイ丸は、もじワク研究が開発した「マメロン」というフォントをベースにして作成された丸みのあるフォントです。
非常に見た目に特徴があり、手書き風のフォントと丸ゴシックの間のような造りで文字の形がやや個性的ですが、みやすさもあるフォントです。
筑紫丸ゴシックにも若干似ているような気がします。
可愛らしさがありながらも、みやすいフォントなのでビジネスよりはブログなどのメディアに合いそうなフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet">font-family: 'Kiwi Maru', serif;明朝体のGoogleフォント
根強い人気のある明朝体です。
明朝体は、横線に対して縦線が太く、横線の右端、曲り角の右肩にウロコと呼ばれる三角形の山が特徴的な書体です。
特に小説などの長い文章によく使われていて、長い時間での閲覧でも読みやすく、疲れを感じさせない。そんな書体です。
Noto Serif JP
Noto Serif JPは、Notoの明朝体のフォントで、まさしく由緒正しき明朝体です。
全体的に線は細いですが、力強くはっきりしていて見やすいWebフォントなので、縦書きのサイトを作る時に重宝しそうなフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet">font-family: 'Noto Serif JP', serif;Sawarabi Mincho
さわらび明朝は、縦は太く横は細くの明朝体のセオリー通りのフォントで、ほどよい余白部分も気持ちがいいフォントです。
また、力強さも持ち合わせている書体なので、元来相性の良い紙媒体だけでなく、Webサイトに使っても可読性を損なうことなく使用できます。
文字の適度な余白も可読性に直結します。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">font-family: 'Sawarabi Mincho', sans-serif;Shippori Mincho
「しっぽり明朝」は、小説や電子書籍の本文で利用することを想定してデザインされたフォントだそうです。
「しっぽり」の意味を調べると、しっとりと十分にぬれるさまで、その感じを表現しているフォントで、縦書きの文章にピッタリです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap" rel="stylesheet">font-family: 'Shippori Mincho', serif;Shippori Mincho B1
見た目は「しっぽり明朝」と一緒ですが、「しっぽり明朝B1」は画線が交差している部分に墨が溜まったような独特の形状の墨だまりを再現しています。
この墨だまりがあることで、明朝ならではなのシャープさに丸みが加わって、自然体な優しさが出るようなフォントになります。
ちょっとの違いが、印象の大きな違いになります。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap" rel="stylesheet">font-family: 'Shippori Mincho B1', serif;New Tegomin
テゴミンは、手書き明朝体をベースにフォント化された日本語フリーフォントです。その為、明朝体よりに手書きの風合いを加えたフォントです。
手書き風のフォントは個性的だからこそ、使い方に迷いそうですが、デザインに親しみやすさをもたせることができます。
その為テゴミンは、明朝体の硬さと、手書きの毛筆っぽさを持ち合わせたフォントの仕上がりになっています。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet">font-family: 'New Tegomin', serif;ポップ体のGoogleフォント
結構毛嫌いされることが多いポップ体ですが、フライヤーやポスターなどによく使われています。
Hachi Maru Pop
70〜80年代に流行った丸文字をイメージして作られたフォント、よくありがちなポップ体の肉厚さを削った細身の書体で、ゆるやかにカーブを描いた丸い印象のフォントです。
文章にすると、所々の特に漢字に見づらい部分が出てきてしまうので、見出し部分やコピー部分など限定的に使うことが良さそうなフォントです。
さすがに本文全体がこれだと目が疲れそうです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap" rel="stylesheet">
font-family: 'Hachi Maru Pop', cursive;フォントワークス提供のGoogleフォント
業界で初めて和文Type1フォントパッケージをリリースしたフォントワークスが2021年2月、Googleフォントに提供した日本語フォントです。
フォントワークスは、個人的に最も好きなフォント「筑紫」も作った会社です。
RocknRoll One
ロックンロールワンは、特徴的なデザインフォントで文字内のポッチ部分が丸になっていたりと、印象に残るフォントです。
個性的で多少のレトロ感もあるフォントですが、案外可読性もあるので本文に使用しても問題はなさそうですが、それよりはポイントポイントで使う方が向いていると思います。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">font-family: 'RocknRoll One', sans-serif;Dela Gothic One
文字全体に縦幅が狭く、横長に変形した平体のかかったフォントで、肉厚でもあります。
その為、長文に使用するのはさすがに無理がありそうですが、見出しやコピーに使うには良いフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">font-family: 'Dela Gothic One', cursive;Reggae One
全ての文字の横・縦の線に、太い→細い・細い→太いの強弱がつくレゲーフォントです。
用途が限られますが、案外縦書きの場合だと、いい感じにハマるフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap" rel="stylesheet">font-family: 'Reggae One', cursive;Train One
トレインワンは、見出しなどポイントポイントで使うのに向いているフォントです。
二重の線で文字が描かれたフォントなので、画数が多い感じには不向きなフォントですが、逆に画数の少ない文字にはある程度の見易さで、印象も強く残せるフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Train+One&display=swap" rel="stylesheet">font-family: 'Train One', cursive;Potta One
ポッタワンは、手書き風で文字の太さもあるフォントです。
このようなフォントは、本文での使用は厳しいですが数字のみに採用するなど、ポイントポイントではいい感じにハマります。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">font-family: 'Potta One', cursive;DotGothic16
ドットゴシックは、その名の通りドット風のフォントです。
これまでもドット風のフォントは色々ありましたが、ここまで複数の漢字に対応しているものがない為、実用には程遠くひらがな・カタカナの限定的なものでしたが、このフォントは漢字に対応しているので、実用的です。
ファミコンの8bitのドットよりは、16bitのスーパーファミコンで利用されていた感じのドットに近いです。
ドット絵と組み合わせると、威力を発揮するフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">font-family: 'DotGothic16', sans-serif;Stick
スティックはその名の通り、文字のパーツパーツが棒で作られているフォントです。
ひらがなはそこそこですが、漢字が案外見やすいので文字の構成内容によっては結構見やすく使えそうなフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Stick&display=swap" rel="stylesheet">font-family: 'Stick', sans-serif;それ以外のデザインフォント
ゴシック体や、明朝体など書体に属さないフォントもGoogleフォントで公開されています。
Yusei Magic
油性ペンを使って手書きで書かれたようなユセイマジックというフォントも、Googleフォントで利用できます。
その名の通り、油性ペンならではの良さが出るフォントでポップやフライヤーっぽいデザインに相性が良いフォントです。
明治維新を成功させ、近代国家として生まれ変わった極東の小国・日本。時に世界は帝国主義の嵐が吹き荒れ、極東の端に位置するこの国も西洋列強の脅威から無縁ではなかったが、しかし逆境の中にありながらこの誕生したばかりの小国には亡国の悲愴さを吹き払う壮気があった。近代化を遂げて史上初めて「国民国家」となったこの国は、民族が一体となるその昂揚感の下で国民の端々までもが列強に伍する強国への飛躍を夢見て邁進していた。殊に維新の成立と同時期に生を受け、新興国家の青春時代に自らの青春を重ねる若者達は、一人一人が国家の興亡を担わんという客気を胸に成長した。旧伊予国松山出身の三人の若者も、同様の気概を抱いて世に出ようとしていた。
陸軍に入り、騎兵部隊の創設に生涯をかけることを誓った秋山好古。好古の弟で海軍に入り、海戦戦術の開拓に人生を捧げる決意をした秋山真之。そして真之の親友で文芸の道に入り、俳句・短歌といった伝統文芸の近代化を目指さんとする正岡子規。彼らもまた多くの若者達と同様の志を持ち、さながら坂の上の青い天に輝く一朶の白い雲を目指すが如く、昂揚の時代の中でその一歩を踏み出そうとしていた。
ABCDFG1234567890
コードを表示する
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">font-family: 'Yusei Magic', sans-serif;さいごに
Googleフォントは、全てWebフォントです。Webフォントは、ユーザー側の閲覧環境に左右されることなく表示できるので、意図したデザインでユーザーに見てもらうことができるので、デザインする時には非常に有利です。
また、デザインの一環でWebフォントを使っても、文字として検索エンジンに認識してもらえるので、SEOの面でも有利とメリットも多くなります。
Googleフォントは本当便利です。
今回の記事をまとめると、
- Googleフォントは無料で利用可能。もちろん商用利用も可。
- 2021年4月時点では21種類の日本語フォントがある。
- どれも使いやすくサイトに合うフォントを選びましょう。
と、しつこいようですが非常に便利なので本当にオススメです。
ですが、これら日本語のフォントには、あまり使わない漢字もフォントのデータに多く含まれています。その為、日本語Webフォントを使用する場合、フォントデータの読み込みを早くする為、使わない文字を除いて軽量化（サブセット化）しておくのがオススメです。
以下の記事を参考にしてサブセット化するなど必要に応じて対応するようにしましょう。
