Web制作 2017.11.15

こんにちわ。NILS ITインターンのコウスケです。

通常パソコンを利用する分には、特に意識することはないと思いますが、
画像にかっこいいメッセージを入れて、メッセージカードを作りたい!
Webページ上に格好いいフォントを表示させたい。
なんてことはありませんか?

某サイトで一番人気とされている「DIN」フォントは58.31ユーロ
Macで標準搭載だけどWindowsには搭載されていない
大人気の「ヒラギノフォント」はセット価格で¥ 36,180など、
めちゃめちゃ高くないですか!?(汗

そこでおすすめが全て無料で商用利用も可能な「Googleフォント
今回はGoogleフォントについて紹介していきたいと思います。

Google フォントとは

上記にも記載したとおり、Googleが提供している完全無料で商用利用も可能なフォント
Webフォント※が利用できる、そして豊富なフォント数がメリットです。

デメリットはなんですかね・・特にないじゃないでしょうか、
あえて言うならあとは好きなフォントが見つからないかもしれない程度でしょうか。

どんなフォントがあるの?

Googleフォントには、多くのフォントが用意されていますが、多くのフォントが英語のフォントです。
今回は、Webフォントとしても使える日本語フォントについて紹介したいと思います。

Noto Sans Japanese(源ノ角ゴシック)
「Noto Fonts」GooleとAdobeが共同開発したフォント
もともとキレイでパソコン上でも最も読みやすい書体のひとつであるゴシック体、
その中でも大人気のヒラギノ角ゴシックに似ていて無料とあって、
デザイナーさんの中ではもっともメジャーなフォントのひとつ。
日中韓3カ国語に対応したオープンソースフォントとして公開され始め、
さらに人気は拡大するでしょう。

M+ 1p
日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。

Rounded M+ 1c
明るく伸びやかなデザインを心がけた

はんなり明朝
明朝体は墨溜まりを意識してデザインしています。

こころ明朝
少しほっそりとした、角丸な明朝体です。まろやかで、軽い感じがする文字です。

さわらび明朝
本文用のフォントとして使いやすくなるようにイメージしています。

ニクキュウ
モリっとして、ツヤのあるカタカナフォントです。

ニコモジ
すこしでもデザインのてだすけになれればさいわいです。

Googleフォントの使い方

フォントのダウンロード 

https://fonts.google.com/にアクセスしてください。
好きなフォントを選択します。
[SELECT THIS FONT]を押下します。
[Download this selection]を押下。
Zipファイルがダウンロードされます。
上記で紹介した日本語フォントはダウンロードファイルは無いようです。(2017年11月現在)
個別に作者のサイトを訪問してダウンロードしてください。

インストール

以下を参照して、ダウンロードしたファイルを置いてください。
Windows
https://helpx.adobe.com/jp/x-productkb/global/233291.html
Mac OS X 
https://helpx.adobe.com/jp/x-productkb/global/233292.html

Webサイトで使用する方法

前に説明したWebフォントこれをWebサイトで使用する方法をお知らせします。
上記に説明した日本語フォント。
こちらは以下のリンクから確認することができます。
https://googlefonts.github.io/japanese/
使いたいフォントの画面までスクロールして、右側の<a hearf~の部分をコピーします。
それを使いたいサイトのHeaderタグにペーストします。
次にサイトの<a hearf~の部分の下に記載されている .wf-~で始まっている部分をコピーし、
任意の変数を指定し、 クラス変数を指定します。
あとは、実際にBody句でそのフォントを適用したい文字列にて、
Style句で指定したクラスを呼び出して適用してください。

HTMLタグ


HTMLでの表示

Googleフォントを使ってみよう

すでにインストールが終わっている場合は、どのソフトウエアでも使用することができます。
以下は、Wordで使ってみた例です。

 

IT留学に関するお問い合わせ
おしゃれなフォントが盛りだくさん!Googleフォントを使ってみよう!!

この記事が気に入ったら
いいね!をお願いします(^^)