Googleフォントの使い方
こんにちは、つちだにんじんです。
今回はGoogleフォントについて書きます。
web上だとフォントに限りがあって、デザインの幅が狭まりますよね・・・
そんな中でも、Googleフォントを使えばフォントの幅も広がるのでお勧めです！！
Googleフォントとは？
Googleフォントは、Googleフォントで提供されているフォントをwebサイトに読み込むことで、そのフォントを表示することができるようになるというものです。
Chrome以外のOSでも表示してくれるので、とても良いツールです。
webデザインをされる際には必須のになるかと思います。
ちなみに、Googleフォントにならなんでもフォントがあるわけではありません。
ですので、webサイトのデザインを考える時には、web上で使えるフォントであるかを確認して作ると構築の際に楽です。
Googleフォントの読み込み方法
使いたいフォントをカゴに入れる
①まずはGoogleフォントにアクセスします。↓
②使いたいフォントを検索し、必要なフォントを全てカゴに入れていきます。
（お金はかかりません）
③必要なフォントを全てカゴに入れたら、カゴのアイコンをクリックしてカートの中身を確認します。
（再度言いますが無料です安心してください）
カゴに入れたフォントの必要なweightやstyleを選ぶ
フォントによっては、太さや種類が複数ある場合があります。
これはNoto Sans Japaneseのフォントですが、weightやstyleが複数あります。
One valueだと１つ選ぶことができ、Full axisだと全種類読み込むこととなります。
必要に合わせて選んでください。
（種類が多くなりすぎると読み込みが遅くなるので、必要な分だけにするのがお勧めです）
・・・あ、ちなみにweightやstyleはカゴに入れる段階で必要な分を選ぶことができます（すっとぼけ大馬鹿者）
読み込むためのコードをコピーする
必要なフォントが揃ったら、読み込む用のコードをコピーします。
読み込む用のコードは、右側にあるやつです。
まずはHTMLに記述する用のタグです。
HTMLには赤で囲ってある
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=~~~省略~~" rel="stylesheet">この部分をコピーして貼り付けます。
貼り付け先は、HTMLのhead内です。
私はCSS読み込みタグの上にGoogle Fontの読み込みタグを記述してます。
次はCSSに貼り付けるタコードです。
@importをクリックすると、今度はCSS用の読み込みコードが出てきます。
これをCSSの「@charset "UTF-8";」の下に貼り付けておいたらOKです！
これでフォントの読み込みは完了です！
しかしこれでは読み込んだだけなので、反映はされません。
フォントを反映させる
ここからは読み込んだフォントを実際に反映させていきます。
反映させるのはCSSで行います。
とても簡単です。
「とりあえずサイト内共通でデフォルトフォントはこれ！」というのがあるなら、
*{
font-family: "Noto Sans JP", sans-serif;
font-style: normal;
font-weight: 100;
}こんな感じでフォントを指定していきます。
（「*」はallでの指定）
ちなみに親切にfont-familyやweightなどここに書いてあるので、これをコピペすればOKです。
「一部ここにだけこのフォントを適応させたい！」という場合は、その部分にフォントの種類を指定するCSSを当ててやってください。
p{
font-family: "Darumadrop One", sans-serif;
font-weight: 400;
font-style: normal;
}↑こんな感じで。
Googleフォントを活用して、ぜひいい感じのwebサイトを作ってみてください！
私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！