Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

日本語もありますよ!Google Fontsの使い方

Google Fontsとは、Googleが無料提供しているWebフォントです。商用も使えますし、2019年から日本語フォントが追加されました。部分的に使用するだけで、おしゃれな印象になりますね。ただ、あまり使用するとサイトの表示スピードが低下するので、注意が必要です。

朗報です!

2021年:日本語フォントが大幅に追加されました。個性的な書体が多数あり便利です。

INDEX

Webフォントって何?

PCやスマホには、それぞれ異なるフォントがインストールされています。サイトでそれらに無いフォントが使われていた場合、代替えフォントが使われます。デザイン性を統一する際にWebフォントを使う事が出来ます。サーバー上のフォントにリンクして、それを参照する仕組みです。

Google Fontsの設定

  • 1:言語を選択 [Japanese]
  • 2:比べたい文言を入力するとイメージしやすいです。
  • 3:気に入ったフォントをクリック。
Google Fonts
  • 4-1:気に入ったフォントスタイルを選び[Select this style]をクリックして登録する方法と、
    4-2:ページをスクロールして [+]をクリックして登録する方法。どちらもStyleを修正出来ます。
  • 5:登録内容が確認できます。ショッピングカートの様な感じ。複数登録可能です。
Google Fonts
Google Fonts

6:[Enbed]をクリックしてコードを入手します。

Webフォント

Link のコード(↓は例)を<head>の中に記載する

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

htmlに記載しなくても@importにあるコードをCSSファイルの中に書いてもOKです。

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

CSS rules to specify families のコードはCSSファイルに書きます。h1に適応する場合は、こんな感じ。

h1{font-family: 'Roboto', sans-serif;}
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる