WEB部カワシマです。

最近、推しのアイドルが脱退を発表しました。辛いです。

元気ないですが頑張って記事を書きたいと思います。今回はWEBデザインにはGoogle Fontsが便利だから使おう！っていう記事です。ハァ…

適当なフォントでデザインしてない？

Photoshopやillustrator、最近だとXDなどでWEBデザインを行っている方も多いと思います。

コーディングも行う方はわかると思うんですが、これらのソフト上で使えるフォントと実際にWEB上で使うことができて、表示されるフォントは違います。

WEB上でのフォントの表示指定は以下の通り。

  • フォントのデータ自体をWEB上にあげて指定してあげる。
  • WEBフォントのサービスで公開されているもののURLを指定してあげる。
  • ブラウザに搭載されているフォントで表示。

大まかにはこの３つになるかと思います。

デザインをする際に使えるフォントはパソコン内に入っているフォントなのでWEB上で表示されるフォントとは違うというわけです。

では何を使えばいいの？

結論から言いますとどちらにも入っている・どちらでも使えるフォントを選ぶとデザイン上とWEB上での差異はなくなります。

パソコンにも入れることができて、WEB上でも同じく表示できるフォントを使用する。

これが大事です。

そんなあなたにGoogle Fonts

そこで今回の記事内容につながるわけですが

  • Google FontsはWEB上でURLでフォント指定も可能
  • パソコン上に同じフォントをインストールできる。

この２点をクリアしています。WEBデザインにはもってこいですね。

実際に使ってみよう。

今回はデザイン上で使ってみるという記事なのでコーディングの方は省かせていただきますが、検索すればたくさん記事がでてきるので問題ありません。

では早速デザインで使うためにパソコンに入れるフォントデータのダウンロード方法をご紹介します。

サイトにアクセス

Google Fontsのサイトにアクセスしましょう。

使いたいフォントを選択

今回はNoto Sans JPとNoto Serif SCを選んでみます。

使いたいフォントの右上の+マークをクリックしていきます。

すると右下に黒いタブが現れます。ここを再びクリック。

ウィンドウが開きますので、右上のダウンロードマークを押すとフォントファイルがまとめて圧縮されたデータがダウンロードできます。

あとは展開して通常のフォントと同じようにパソコンに入れてあげるだけです。

これで実際と同じフォント!!

これで実際にWEB上で表示されると同じようにデザインできます。

これでコーダーさんもフォントを迷うことがなくなりますね。

ぜひお試しあれ。