本ページはプロモーションが含まれています。人気のGoogleFonts、オススメのGoogleFontsを紹介します!GoogleFontsの使い方、探し方もあわせて解説します。GoogleFontsはGoogle社が提供する無料でWebフォントを利用できるサービスです。GoogleFontsを利用することによって、よりWebサイトが魅力的になりデザインの幅も広がると思うので積極的に利用しましょう。サンセリフ体Roboto癖のないサンセリフ体。太さのバリエーションも多く、細め目のフォントも太目のフォントも使いやすい。GoogleFontの統計で最も使われているフォントです。RobotLatoこちらもの人気のサンセリフ体。Robotと比べると少し丸みがあり、「柔らかい」印象です。太さのバリエーションも多く使いやすい。GoogleFontの統計で3番目に使われているフォントです。LatoMontserratこちらもの人気のサンセリフ体。GoogleFontの統計で4番目に使われているフォントです。古いポスターや看板に触発されデザインされたフォントらしく、少し「クラシカル」な雰囲気がします。CondensedRobotoのコンデンスドフォント(横幅を狭くデザインしたフォント)。ノーマルのRoboto同様、使いやすく癖のないフォントです。Condensedはそのあたりも問題ないと思います。CondensedOswaldこちらものサンセリフ体のコンデンスドフォント。GoogleFontの統計で5番目に使われているフォントです。コンデンスドフォントでは最も人気のフォントのようです。Condensedと比べると少し「クラシカル」な印象。OswaldRubik少し角に丸みがあるサンセリフ体。「柔らかく」「親しみやすい」印象です。太くすると案外「力強い」印象です。Sansすこしクセのあるサンセリフ体。「エレガント」で「ビンテージ」。タイトルや見出しで少しニュアンスをつけたい時などにイイかも。Sansセリフ体Merriweatherセリフ体の中で最も人気のあるフォント。スクリーン上で快適に読めるフォントを目指してデザインされており可読性が高いフォント。見出しやタイトルにイイかも。MerriweatherVollkorn特に癖がなく使いやすいセリフ体。「現代的」で「若々しい」印象です。セリフ体ですが割と太目で、可読性も高く見やすいフォント。小さくしても見やすいです。BaskervilleBaskervilleというフォントをベースにつくられたセリフ体のフォント。Baskervilleはレディースのハイブランドや雑誌などにも使われたするフォントです。「エレガント」で「高級」な印象です。GaramondGaramondをベースにデザインされたセリフ体。Garamond同様、「クラシカル」で「伝統的」な印象。FatFace「ビンテージ」感のあるセリフ体。19世紀のイギリスやフランスで広告ポスターに使われていた重厚なタイトル用フォントにインスパイアされているらしいです。FatFaceその他Courgetteイタリック体のスクリプト書体。ペンで書かれたような書体で、可読性も高い。Sans手書き風フォント。手書き風とはいえかなりシッカリしています。見ないと手書き風に見えないかも。「ナチュラル」で「親しみやすい」印象。JP日本語フォントと言えば「コレっ!」という感じ。日本語フォントの中で最も人気のあるフォント。日本語フォントはどうしてもデータが重くなってしまい、複数の日本語フォントを使用するとサイトが重くなってしまう原因になりかねません。日本語フォントを使用する際は、複数のウエイト(文字の太さ)を使用せず1つに絞って使用した方が無難でしょう。JPの明朝体バージョン。こちらも使いやすいフォントです。29」の期間のものとなっています。フォントを検索するGoogleFontsにアクセスするとページ上部に「検索機能」があるので、そこから「フォントの名称」または「フォントの条件」からフォントが検索できます。フォントを選択するフォント一覧からフォントをクリックすると、フォントの詳細ページへ移動します。詳細ページに移動すると、フォントのスタイルの一覧が表示されます。style]をクリックすると、そのフォントスタイルを読み込むためのソースが表示されます。フォントのスタイルは複数選択することも可能です。style]を押すと該当スタイルがソースから削除されます。ソースをコピーするWebサイトにGoogleFontsを読み込む方法として、HTMLの<head>で読みこむ方法と、CSSから読み込む方法の2つの方法があります。GoogleFontsではコードは、<link>と@importの2パターンから選択できます。HTMLの<head>から読み込む場合は<link>を、CSSから読み込む場合は@importを選択して下さい。・上のコードをコピーしてHTMLのhead内へ追加して下さい。rel="stylesheet"></head>・下のコードはコピーしてfont-familyを追加したいCSSに追加して下さい。・上のコードをコピーしてCSSへ追加して下さい。url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap');・下のコードはコピーしてfont-familyを追加したいCSSに追加して下さい。]というリンクがあるので、そこからフォントがダウンロードできます。ダウンロードしたフォントは、インストールすればPhotoShopでも使用可能です。サイト【リンク集】mukoWeb制作会社数社でデザイナー/ディレクター/採用担当として働いたのち、今フリーランス。WEB業界歴15年以上。UnityやBlenderとか色々手をだしては忘れていきます。Unityアプリ2本リリースしてます。2022/06/05オススメ記事1【ブラック回避】求人票からみるブラックWEB制作会社の見分け方そんな疑問にお答えします。私は、これまでWEB制作会社を2社経験しており、そのうちの1社では採用担当をしていました。...3【2022】Unity初心者おすすめ本9冊Unity初心者向け書籍の感想とオススメ度をまとめてみました。...4参考にしたい!個人ポートフォリオサイト10選【国内編】フリーランスのWEBデザイナーの方のサイトはモチロン、フォトグラファー、ロゴデザイナー、ダンサーの方のポートフォリオサイトなども合わせてまとめてみました。...6【超初心者向け】ゼロからのHTML/CSS勉強法【独学】そんな人向けに記事を書きたいと思います。