**こんにちは！ばーんです！**
今回はフォントについて書いていきます。

#はじめに
フォントの中でも使用することの多い「Google fonts」について書いていきます！

自分が作ったサイトを見ていて、「うーんなんか微妙だなぁ…」
と思った時に「フォント変えたら？」と言われ変えてみると…

**めちゃいい！**

と実用性を感じられたので書き記していきます。

##フォントでどれぐらい変わるの？
**論より証拠！**
はいドンッ！
<img width="1391" alt="Screen Shot 2020-01-25 at 20.46.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/3b882500-605b-da53-782b-494cfd420eeb.png">
<img width="1391" alt="Screen Shot 2020-01-25 at 20.45.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/4087366f-1083-3eff-a973-89f12cab6b2d.png">

さらにドンっ！（聞こえる容量の悲鳴）
<img width="580" alt="Screen Shot 2020-01-25 at 20.44.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/8429d58a-9a09-ad36-207f-5bd5e1205f3f.png">
<img width="580" alt="Screen Shot 2020-01-25 at 20.44.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/0160bb80-1df7-3021-72aa-ba519d1552fb.png">

フォントが違うだけでかなり印象が変わりませんか？

↑の例だと両方1枚目はキリッとしてる印象を受けました（公的な文章などに使われている印象です）。
2枚目は少しPOPでかつ、若干のオシャレ感があるフォントを選びました。

フォントに優劣はなく、どういったターゲットなのか？何を伝えたいのか？
を明確にして進んでいくと良いと思いました。

##フォントはどこで手に入るのか？

フォントを変えたいと思っていても、そのフォントがどこにあるか分からない
という方もいらっしゃるのでは…自分が実際そうでした
「フォントおすすめ」「フォントおしゃれ」とかでググっても、そのフォントをどうやって使うのかが分からない…

という状況もあるかと思います。

そんな時におすすめなのがこちら
「[Google fonts](https://fonts.google.com/)」

###Google fontsとは？

Webフォントの1種類です。
Webフォントって何よ？っていう話ですが、ざっくり言うと端末に頼らずにフォントを表示させることができる仕組みです。
Google fontsの場合はHTMLのhead内に設置し、CSSにリンクを飛ばすことで可能にしています（CSS直接貼り付けもできますが割愛します）。

###使い方
<img width="1391" alt="Screen Shot 2020-01-26 at 21.16.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/27663dca-1602-f931-fe77-1fd368982228.png">
まずは①で言語選択してください。日本語であればJapanese　英語であればLatin。
ちなみに、①あたりのタグで太さ、書き方、大きさなどのソートや加工が可能です。

②で気に入ったフォントの右上の「＋」を押して下さい

<img width="1391" alt="Screen Shot 2020-01-26 at 21.18.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/c429eb22-8782-1587-db2c-712fcb95791e.png">
①「＋」から「ー」に変わっています（下の②黒いバーに追加されました）

ちなみに…
<img width="1391" alt="Screen Shot 2020-01-26 at 21.19.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/81f76ba8-85d6-46b4-18dc-8fe9e9ef7d9d.png">
使いたいフォントがあれば複数選択も可能です（上の図と比べると Familiesが1→3になっているのが分かるかと）

そして、出てきた黒いバーを押すと…
<img width="916" alt="Screen Shot 2020-01-26 at 21.25.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/25f4dd4a-879f-1506-d546-34e7e9fa216b.png">
こんな形で下からニョキッと出てきます。
①カスタマイズ　太さや言語を選べます
②読み込み速度　今回は3種類なので少し重いです…太さを多く選んでも重たくなるのでご注意を
③HTML　このコードをHTMLのhead部分に設置して下さい（コピ貼りでOKです）
④そしてCSSで指定する時にこのfont-familyを打ち込むと使用できます！！
**⑤この後ご説明します**

大枠の流れは以上となります。おそらくこれでお目当てのフォントは使える（表示できる）ようになったはず…
注意点としてはWebフォントを読み込むと重たくなります。これは自分が使用していない文字のデータも読み込んでしまう為です。
ですので、不用意に多く読み込んだり、使わない太さまで読み込まない方がいいかと思います。

一応自分が使う文字だけを読み込む方法もあるようですが…

###オフライン（ローカル）での使い方
ここまではWeb上で表示させるやる方を書いてきました。
が、ローカルでも使用したい時があります。

自分の場合は「AdobeXD」を使用している時でした。
他のデザインツールは使用していないのですが、フォントをダウンロードすれば恐らく使用可能です！
（ツールによってはプラグインで表現できるかもです）

個人的にはAdobeXDのフォント関連はUX悪かったので流用できたのはありがたかったです。

やり方はとても簡単で、先ほどの写真の⑤の矢印アイコンを押せばOKです！
そうするとZIPファイルの読み込みが始まるので、読み込み終わって中のフォルダを展開すれば使用できるようになっています。

##最後に
いかかでしたでしょうか？
**たかがフォント。されどフォント。**
個人的にはフォントと色（余白含む）だけでかなり見栄えは変わると思っています。
なので今後はその辺りも学習して進めていけたらいいなーと考えています。

最後まで見ていただきありがとうございましたm_ _m

[参考サイト](https://saruwakakun.com/html-css/basic/google-fonts)

「フォントの学習について」
https://tsutawarudesign.com/yomiyasuku2.html
[cv:issue_marketplace_engineer]

**こんにちは！ばーんです！**
今回はフォントについて書いていきます。

#はじめに
フォントの中でも使用することの多い「Google fonts」について書いていきます！

自分が作ったサイトを見ていて、「うーんなんか微妙だなぁ…」
と思った時に「フォント変えたら？」と言われ変えてみると…

**めちゃいい！**

と実用性を感じられたので書き記していきます。

##フォントでどれぐらい変わるの？
**論より証拠！**
はいドンッ！
<img width="1391" alt="Screen Shot 2020-01-25 at 20.46.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/3b882500-605b-da53-782b-494cfd420eeb.png">
<img width="1391" alt="Screen Shot 2020-01-25 at 20.45.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/4087366f-1083-3eff-a973-89f12cab6b2d.png">

さらにドンっ！（聞こえる容量の悲鳴）
<img width="580" alt="Screen Shot 2020-01-25 at 20.44.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/8429d58a-9a09-ad36-207f-5bd5e1205f3f.png">
<img width="580" alt="Screen Shot 2020-01-25 at 20.44.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/0160bb80-1df7-3021-72aa-ba519d1552fb.png">

フォントが違うだけでかなり印象が変わりませんか？

↑の例だと両方1枚目はキリッとしてる印象を受けました（公的な文章などに使われている印象です）。
2枚目は少しPOPでかつ、若干のオシャレ感があるフォントを選びました。

フォントに優劣はなく、どういったターゲットなのか？何を伝えたいのか？
を明確にして進んでいくと良いと思いました。

##フォントはどこで手に入るのか？

フォントを変えたいと思っていても、そのフォントがどこにあるか分からない
という方もいらっしゃるのでは…自分が実際そうでした
「フォントおすすめ」「フォントおしゃれ」とかでググっても、そのフォントをどうやって使うのかが分からない…

という状況もあるかと思います。

そんな時におすすめなのがこちら
「[Google fonts](https://fonts.google.com/)」

###Google fontsとは？

Webフォントの1種類です。
Webフォントって何よ？っていう話ですが、ざっくり言うと端末に頼らずにフォントを表示させることができる仕組みです。
Google fontsの場合はHTMLのhead内に設置し、CSSにリンクを飛ばすことで可能にしています（CSS直接貼り付けもできますが割愛します）。

###使い方
<img width="1391" alt="Screen Shot 2020-01-26 at 21.16.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/27663dca-1602-f931-fe77-1fd368982228.png">
まずは①で言語選択してください。日本語であればJapanese　英語であればLatin。
ちなみに、①あたりのタグで太さ、書き方、大きさなどのソートや加工が可能です。

②で気に入ったフォントの右上の「＋」を押して下さい

<img width="1391" alt="Screen Shot 2020-01-26 at 21.18.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/c429eb22-8782-1587-db2c-712fcb95791e.png">
①「＋」から「ー」に変わっています（下の②黒いバーに追加されました）

ちなみに…
<img width="1391" alt="Screen Shot 2020-01-26 at 21.19.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/81f76ba8-85d6-46b4-18dc-8fe9e9ef7d9d.png">
使いたいフォントがあれば複数選択も可能です（上の図と比べると Familiesが1→3になっているのが分かるかと）

そして、出てきた黒いバーを押すと…
<img width="916" alt="Screen Shot 2020-01-26 at 21.25.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/25f4dd4a-879f-1506-d546-34e7e9fa216b.png">
こんな形で下からニョキッと出てきます。
①カスタマイズ　太さや言語を選べます
②読み込み速度　今回は3種類なので少し重いです…太さを多く選んでも重たくなるのでご注意を
③HTML　このコードをHTMLのhead部分に設置して下さい（コピ貼りでOKです）
④そしてCSSで指定する時にこのfont-familyを打ち込むと使用できます！！
**⑤この後ご説明します**

大枠の流れは以上となります。おそらくこれでお目当てのフォントは使える（表示できる）ようになったはず…
注意点としてはWebフォントを読み込むと重たくなります。これは自分が使用していない文字のデータも読み込んでしまう為です。
ですので、不用意に多く読み込んだり、使わない太さまで読み込まない方がいいかと思います。

一応自分が使う文字だけを読み込む方法もあるようですが…

###オフライン（ローカル）での使い方
ここまではWeb上で表示させるやる方を書いてきました。
が、ローカルでも使用したい時があります。

自分の場合は「AdobeXD」を使用している時でした。
他のデザインツールは使用していないのですが、フォントをダウンロードすれば恐らく使用可能です！
（ツールによってはプラグインで表現できるかもです）

個人的にはAdobeXDのフォント関連はUX悪かったので流用できたのはありがたかったです。

やり方はとても簡単で、先ほどの写真の⑤の矢印アイコンを押せばOKです！
そうするとZIPファイルの読み込みが始まるので、読み込み終わって中のフォルダを展開すれば使用できるようになっています。

##最後に
いかかでしたでしょうか？
**たかがフォント。されどフォント。**
個人的にはフォントと色（余白含む）だけでかなり見栄えは変わると思っています。
なので今後はその辺りも学習して進めていけたらいいなーと考えています。

最後まで見ていただきありがとうございましたm_ _m

[参考サイト](https://saruwakakun.com/html-css/basic/google-fonts)

「フォントの学習について」
https://tsutawarudesign.com/yomiyasuku2.html


続きを読むには単価診断を受けてください（30秒）