今回はいろいろな種類のフォントがサイトに使えるGoggle Fontsその使い方をwindowsになりますがご紹介します。
初めて使われる方にもわかりやすく画像付きで解説していきます。それではどうぞ。
目次
①まずはGoogleFontsとは
ウェブフォントを使えるGoogleのサービスになります。商用利用も可能。私も仕事でお世話になってます。
GoogleFontsの特徴
日本語対応の文字においては比較的少ないかとは思われますが・
②GoogleFontsの使用方法
まずはサイトにアクセスします！
GoogleFonts
↑からアクセスできます！(''Д'')
検索と言語選択
こちらの画面に行くと思います
①はフォントを検索できます。
②はフォントの言語ですね。
フォントを選ぼう
フォントが決まったらクリックします
ここでは
Noto Sans JPをクリックします
文字の太さを選ぼう
こちらの画面になったら
使いたいフォントウェイトを選び
（↑から↓に太くなります！）
Remove this styleを押して
－になったら選択されてます
貼り付け画面へ
選択したら画面右側に
Review Embed という英語があるので
Reviewが選択されてるので
Embedを押してください
そうしますとこの画面になります
エディターへ貼り付けよう
最後に
①がlinkタグになるので
コピーして<head></head>の中に貼ってください
②はcssのスタイル変更ですね
以上で使い方の説明は終わりになります！
GoogleFontsを実際に使って解説
では実際に使って解説します( *´艸｀)まずは、お使いのエディタを立ち上げ(ここではVisual Studio Codeを使います)ます。
headの中に貼り付けよう
まずは上記①のコードをコピーしてきます
<head></head>
のタグの中に貼ります！
ここでは①の下に貼っています
反映するところにクラス名を指定しよう
次はcssですね！
h1にgoogle-fontsというクラス（お好きなクラス名で大丈夫です）をつけていきます
CSSをあてていこう
cssに上記の使い方で解説した
fontfamily~を
コピーして貼っていきます！
あたっているか確認しよう
赤く囲ってるところがｈ１です
黒枠を見てみるとフォント名が変わっていることが
分かるかと思います
右がデフォルトの設定です
これでGoogleFontsがつかえるようになりましたね
上記の
フォントの種類見るプラグインの使い方は
下記を参照ください
-
-
参考失敗から学んだ模写コーディングのやり方
続きを見る
まとめ
ここでは
基礎的なことしか触れてないので色々触ってみて試してみてください！(''◇'')ゞ
使えるようになると便利になります
今回は以上になります ^^) _旦~~
