日本語フォントは英語フォントより文字数が多いのでファイルサイズも大きくなります。英文フォントですとアルファベット・英数・記号合わせて100文字程度ですが、日本語はひらがな・カタカナ・英数・記号、漢字でJIS第1水準漢字だけでも2,965文字あります。表示速度の面でも日本語フォントを複数使用することは避けた方がよいでしょう。また、日本語フォントは太さ(ウエイト)が何種類か用意されてますが、全種類選択すると読み込み速度が遅くなるので注意が必要です。, まずはGoogle Fontsページにアクセスしましょう。Googleフォントはユーザー登録の必要がなく無料で利用することができます。, 日本語フォントを検索したい場合は、LanguagesのプルダウンメニューからJapaneseを選択します。, チェックを入れるとvariable fontsのみが表示されます。variable fontsとは1つのフォントファイルで文字の太さ(ウェイト)を可変できるフォントのことをいいます。日本語のvariable fontはありません。, 使用したいフォントの右にあるSelect this styleをクリックすると、右エリアのSelected familiesにフォントが追加されます。複数のフォント・スタイルを選択することもできます。, Selected families内にあるEMBEDをクリックするcssへのリンク・記述方法が表示されるので、上段に表示されているコードをhead内へ貼り付け、下段のfont-familyを反映させたいCSSに追加します。, CSSから読み込ませる場合は@IMPORTに表示されるコードをコピーして貼り付けてください。, 以上で、比較的簡単にGoogleフォントをサイト・ブログに反映させることができます。英語フォントも数多く提供されているので自分のサイトに合うフォントを探してみてください。, Googleフォントにアクセスし、ダウンロードしたいフォントをクリックすると、フォント詳細ページに遷移します。, ダウンロードしたいフォントの右にあるSelect this styleをクリックし、Download familyをクリックするとフォントをダウンロードします。, Google Fontsのライセンスについては、英文ですが以下のページに記載されてますのでご覧ください。, GoogleとAdobeが共同開発し、2014年にリリースされたオープンソースの日本語フォント。ウェイトは6種類, フリーライセンスで提供している日本語フォント。現状では漢字が十分に揃ってないようなので、メインのフォントとして使用するのは難しい。漢字収録率はさわらびフォントをご覧ください。ウェイトは1種類, ゴシック体同様、漢字が十分に揃ってないようなので、メインのフォントとして使用するのは難しい。漢字収録率はさわらびフォントをご覧ください。ウェイトは1種類, フリーフォントで有名なM+ FONTSのWebフォント版。漢字は直線的で、仮名は丸みのあるドッシリとした日本語フォント。ウェイトは7種類, 新に追加されたゴシック体。フォントサイズを変更しても読みやすいフォント。ウェイトは1種類, 日本語フォントは数が少ないので、比較しやすいですが、英語となると900種類以上の中からフォントを検索しなければなりません。そんな時はアナリティクスページで人気の高いフォントをチェックすることができます。, design.webclips.jp/japanese-free-font-vol01/, 2018年9月に日本語フォントが正式にサポートされ、ますますGoogleフォントを利用するユーザーが増加しました。Google Fontsは無料で利用することができ、900種類以上のフォントが提供されています。今回は、Webフォントだけでなくダウンロードも可能なGoogleフォントの使い方と、おすすめの日本語フォントを紹介します。, GoogleフォントはダウンロードしてPCで使用することも可能です。ここではGoogleフォントのダウンロード方法を解説します。, Googleフォントの日本語フォントは6種類用意されています。最近ではNoto Sans JPを使用しているコーポレートサイトも多く見かけます。明朝・丸ゴシックも使用できるので用途に合わせ活用してみましょう。, Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」, Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」, 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」. Google Fontsは2010年にリリースしたGoogleが提供する、無料で利用可能ななフォントのディレクトリーサービスです。Googleのサーバーからフォントデータを読み込んでWebページにフォントを表示できるWebフォントで世界各国で利用されています。, 日本語フォントを使用できることは便利なことですが、デメリットもありますので理解しておきましょう。
https://t.co/g5dp3e622g pic.twitter.com/lePJIRgbIU, — Google Fonts (@googlefonts) August 7, 2018, その次に、人気ものの並びに、急速に成長してきている注目すべき新しいフォントもご紹介します。それでは…, RobotoはChristian Robertsonによるサンセリフ製品で、GoogleがAndroidのシステムフォントとして開発したものです。最近、非常に人気になり12種類のスタイルもあります。Google Fontsの分析データにも何回も出現します。たとえば、Robotoは最も人気のあるフォントですが、Roboto Condensedは6番目に人気のあるフォントで、Roboto Slabは13番目です!, Open SansはSteve Mattesonにより開発されたサンセリフフォントです。Open SansがGoogleのウェブサイトの一部または印刷広告書類とウェブ広告で使用されます。, SlaboはTiro TypeworksのJohn Hudsonにより開発されたセリフフォントです。このフォントのユニークな点は、特定のサイズ(必要に応じて27pxまたは13px)で使用できるように設計されていることです。, Oswaldは、もともとVernon Adamsにより開発されたサンセリフフォントです。, Source Sans Proは、Paul HuntがAdobe向けに作成されたサンセリフフォントです。Adobeの最初のオープンソースフォントです。, Montserratは、名祖のブエノスアイレスのモントセラトに住んでいるJulieta Ulanovskyによるサンセリフのフォントです。スタイルが18種類もある為、かなりの選択肢があります。, Ralewayは、もともとMatt McInerneyにより作成されたスタイルの18種類もある幅広いサンセリフのフォントファミリーです。Ralewayのお好みの方には、Raleway Dotsもお勧めします。似たようなスタイリングですが、点で書いているフォントで、ヘッドラインにピッタリです。, PT Sansは、ロシア連邦のために開発されたもので、アルファベットとキリル文字の両方を含みます。PTファミリーにはセリフのおプシンも含むフォントが他にもたくさんあります。, Loraは人気のあるセリフフォントで、画面と印刷の両方で読みやすいように設計されています。, 数値だけをみると、上記の10種類のフォントが最も人気のあるGoogleフォントです。しかし、最も人気のあるフォントのみをご紹介することにより、まだ広く知られていない新しいフォントがかわいそうですね。, 次に、分析データのトップに登場しなかった当社のスタッフの好きなフォントのいくつかをご紹介します。, NotoはGoogleが委託したフォントで、セリフとサンセリフの両方のバージョンがあります。定期的に更新されるNotoには現在、フォントが100種類以上もあります!, Nunito Sansはの使用回数が急速に増えているサンセリフフォントです(使用回数は昨年より3倍になりました)。, Promptは、タイのコミュニケーションデザイン会社であるCadson Demakによるサンセリフ製品です。, Work Sansはスクリーン上で使用するために最適化されたサンセリフフォントです。設計者は14px~48pxを対象にミックスウェイトスタイルを使用することを推奨しています。, 1種類のGoogleフォントを選択するのも大変ですが、ウェブサイトのフォントの組み合わせを決定するのはさらに難しいです!ありがたいことに、一人で決めなくてもいいです。最高のGoogleフォントの組み合わせを考え出すには、いい方法がいくつかあります。, まず、Google Fontsウェブサイト自体をスクロールダウンすると、人気のある組み合わせが表示されます:, または、Font Pairなどのウェブサイトを使用することによりもさらなる推進事項が出てきます。, Google Fontsの完璧なフォントを見つけたら、WordPressでそのGoogleフォントを使用するためのベストプラクティスもご紹介します。, Montserrat及びRalewayなどのフォントには、18種類のフォントウェイトもあります。選択肢が多くて確かに良いことですが、WordPressウェブサイトの読み込み時間が悪化するため、18種類のウェイトをすべて加えない方がいいです。これはとても重要です!, ほとんどのフォントでは、原則として最大3種類のウェイトを使用することをお勧めします:, 今日、WordPressウェブサイトの多くでは、イタリック体が全くなく、2種類のフォントウェイトしか使用されません。Google Fontsを自分で埋め込んでいる場合は、Google Fontsの「カスタマイズ」タブで使用するウェイトを選択できます:, 現在、ほとんどのWordPressテーマには、使用するGoogleフォントとウェイトが含まれています。しかし、テーマの開発者が必ずしもパフォーマンスに集中しているわけではありません。したがって場合により、テーマでGoogleフォントを無効にし、自分で追加した方がいい場合があります。, または、可変フォントも普及しはじめ、最新のブラウザのすべてでサポートされています。1つのフォントファイルが各プロパティと一緒に変換できるため、素晴らしいものです。ただし、まだ無料のフォントがあまり用意されていません。一方、GoogleのEarly Accessには可変フォントもいくつかあります。, Googleのサーバーからフォントを提供するのではなく、フォントをローカルでホストすることもできます。これにより、パフォーマンスが向上することがあります。一方、ほとんどのGoogleフォントは既に訪問者のブラウザにキャッシュされている可能性が高いですので、ご注意ください。独自のパフォーマンステストを行うことをおすすめします。, Kinstaのウェブサイトでも使用しているBrandonフォントなどのGoogleフォント以外のプレミアムフォントをご使用の場合は、ローカルにホストする(そしてCDNから提供する)ことが最善の方法です。本件の詳細については、当社のフォントをローカルにホストする方法についての記事をご参照ください。, WordPressのプラグイン及びテーマと同様に、フォントは時間が経つと更新かつ改善されるものです。なお、リスクはWordPressのプラグインほど深刻ではありませんが、定期的なアップデートのあるフォントを選択する価値があるでしょう。例えば、GoogleのNotoファミリーは、2014年以降定期的に更新されています。, 本リストに載っているフォントの大半は人気があるため、上記のすべてのフォントが定期的に更新かつ改善される可能性は高いでしょう。本リスト以外のフォントを選択しても、更新されるほどの人気のあるものにした方が良いでしょう。, 世界保健機関(WHO)によると、2017年現在、視力障害の人数は約2億5300万人です。そのうち、3600万人が盲人であり、2億1700万人が弱視者です。, Googleフォントを使用しているときは、その色やサイズなど、CSSでの表示の形が設定できます。したがって、Web Content Accessibility Guidelines (WCAG) 2.0(ウェブコンテンツアクセシビリティガイドライン)に従うことをご注意ください。これにより、誰でもそのコンテンツにアクセスできるようになります。, アクセシビリティは、視覚、聴覚、身体、発話、認知、言語、学習、神経の障害を含む、広範な障害に関係している。このガイドラインは、広範囲に及ぶ事項を網羅しているが、障害のすべての種類、程度、組合せからくるニーズを満たすことはできない。, 例えば、色のコントラストは非常に重要なガイドラインです。Kinstaのウェブサイトの古いデザインでは、フォントはあまりにも薄すぎて、読みにくかったです。最高のコンテンツを書いているのに読者が読めないことこそは好ましくないですね!, fyi guide page font is a bit too light making it hard to read – darker font would be better , — George Liu (@centminmod) August 14, 2016, WebAIMのColor Contrast Checkerのようなツールを使用することにより、フォントの色が推奨事項に合格しているかどうかが確認できます。以下は、本記事の色がテストに合格した画面です。, Googleフォントは何百万のウェブサイトで使用されているすばらしいものです。フォントウェイトを制限すること、(場合により)ローカルにホストすること、アクセシビリティのガイドラインに従うことなどのベストプラクティスに従うことにより、訪問者にとってより良いユーザーエクスペリエンスを提供できます。, そこで、あなたのお気に入りのGoogle Fontsのフォントとフォントの組み合わせは何ですか。コメントを書いてご意見をお寄せください。当社のフォントについての詳細記事も是非お読みください。, この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。.