フォントワークス8書体がGoogle Fontsで利用可能に！

こんにちは。FASTCODINGデザイナーの七転び八重子です。
2021年1月下旬、フォントワークスは、Google社の「Google Fonts」へ手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体提供を開始しました。が、1月末の段階では、まだGoogle fonts内で反映されていませんでした。すっかり忘れていたのですが、ニュースから一月経って、もう一度確認したところ、6書体が反映されていました。後の3書体はどうしたんだろう。。。

以前アップしたフォント関係の記事です、興味のある方はどうぞ。

FASTCODING BLOG

フォントのすべて「Webサイトで使えるフォントはコレ！」

こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザインになんのフォントを使っていますか？OS標準フォント、市販フォント、Webフォント、がありますが、グラフィックデザインと違ってWebサイトで使える（推奨）フォントは限られています。今回はそんなフォントについて、基礎からしっかりおさらいしてみます。目次そもそもフォントって何？ ① OS標準フォント ② 市販フォント ③ Webフォント Webサイトに使う推奨フォントはコレ Webフォントを使うなら！サブセット...

FASTCODING BLOG

【Google Fonts 高速化】必要な文字だけを読み込む方法！

こんにちは。FASTCODINGデザイナーの七転び八重子です。Webフォント（Google Fonts）って利用されている方多いと思いますが、例えば、サイトタイトルや見出しだけ利用しているといった場合は、全ての文字を読み込むと時間がかかります。そこで、必要な文字だけを指定する事（サブセット化）で軽量化する事で読み込み速度を短縮することができます。今回は、その方法をまとめてみました。目次サブセット化とは？ STEP① Google Fonts の設定 STEP② サブセット化の設定まとめサブセット化とは？サブセット化とは、「必要なフォント...

フォントワークスの８書体をご紹介
Google fontsの日本語フォント（全25書体）
Google fontsのの使い方
まとめ

フォントワークスの８書体をご紹介

Fontworks　ニュース　2021年1月15日　GoogleFontsへディスプレイ書体など全8書体を提供しました

Google fontsで提供されているのは、現時点で６種類でした。今後増えるのかな・・・
同フォントは、フォントワークスのGitHubでも無料公開されています。ライセンスは比較的縛りの緩い“※SLIオープンフォントライセンス 1.1”で、個人利用・商用共に無料です。

SLIオープンフォントライセンス(SIL Open Font License)とは?
商用利用、埋め込み、同梱可。ライセンスの明示が必要。フリーに利用できるフォントライセンスです。単体での再販はできませんが、何かしらのソフトウェアを同梱させることで販売が可能です。商用利用も可能で、ソフトウェアに組み込んでの利用に制約がありません。フォントを改変した場合、フォント名に元フォント名を含める事ができないのと、改変した旨の明記が必要です。また、ライセンス変更が不可となり改変後のフォントにはSIL OFLが適用されます。

① クレー(Klee) One Regular

鉛筆文字のようなアクセントのある楷書フォントです。こちらはRegular。2021年4月7日の段階で、セミボールドと共に、Google fontsには反映されていません。

② クレー(Klee) One SemiBold

セミボールド。

③ トレイン(Train) One Regular

フォントワークスでは「レイルウェイ」という名前で提供されているフォントです。線路を思わせる二重のラインの自体が特徴。個性的なゴシック体なので、見出しに利用できそう。

④ ロックンロール(RocknRoll) One Regular

躍動感があってポップな書体ですね。Webサイトではあまり見かけないフォントですね。グラフィックデザイン向きな感じ。

⑤ ステッキ(Stick) Regular

名前の通り、棒を合わせたような書体です。

⑥ ランパート(Rampart) One Regular

立体的なシャドウ書体です。こちらも、Google fontsには反映されていません。

⑦ レゲエ(Reggae) One Regular

ロックンロールと少し似ていますが、こちらの方が激しい感じ。

⑧ ドットゴシック16(DotGothic16) Regular

ドットを合わせような書体です。

Google fontsの日本語フォント（全25書体）

Google fonts 日本語検索では21書体がありますが、
githubにある書体と合わせると合計25書体あります。

Google fontsのの使い方

Google fontsは無料で利用できまます。

利用時の注意
Google Fontsに限らずですが、Webフォントはサーバーからのテキストデータを読み込んで表示しているため、利用するフォント数やフォントウェイトの種類が多いとページの読み込みに時間がかかる事になります。特に日本語フォントは文字数が多く、ひらがな、カタカナ、漢字を読み込むため注意が必要です。
Googleの推奨する１ページあたりの容量は1.6MB程度ですが、例えば「Noto Sans JP」は1ウェイトあたり1.6MBあるため、「Regular」と「Bold」の２種類のウェイトを利用すると3.2MBかかるため注意が必要です。

① 好きなフォントを選んで、フォントの読み込みのコードと font-family の指定のコードをコピーして使う

好きなフォント選んで、「＋slect this style」をクリックします。ウェイトが複数ある場合があります。

フォントの読み込みのコードと font-family の指定のコードをコピーする

下記の様にヘッダとスタイルに記述する

<html>
  <head>
   <!--フォントの読み込み-->

   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Train+One&display=swap" rel="stylesheet">

   <!--セレクタに font-family を指定-->
   <style>

      h1 {
        font-family: 'Train One', cursive;
      }

   </style>
  </head>
  <body>
    <h1>SEOに強いコーディングならFASTCODING</h1>
  </body>
</html>