コーディングでGoogle fonts使用する方法(太さも変更したい…)

osawaです。お久しぶりです。

今日は①コーディングでGoogle fontsを使用するとき、②動画編集講座、③お昼ごはん、の3本です。

コーディングの際、Google fontsを使用したい…そんな時に便利なお話を今日は紹介します！(前にも少しご紹介しましたが今回は豆知識付き！笑)

まずGoogle fontsのサイトから使用したいフォントを開きます
下の方にあるSelect Light 400等が書かれている部分で自分が使用したいフォントの太さを選択(＋ボタンをクリック)
右側に出てきたメニューの下の方に<link>のコードが出現！
このコードをコピーしてhtmlファイルの<head>内に記載
(ちなみに私はこの時、コメントアウトでフォントの指定とかの記載を入れて後で見返したときに何の記載だったかわかるようにしています♪)
その後Google fontsのサイトの右側の<link>の下に記載されているcss rules〜の部分をコピーしてcssファイル内のフォントを指定したい箇所に記載する

以上でフォントの指定完了です！

🫘ここでちょっとした豆知識🫘

このままだと使用したいフォントの太さが1つしか選択できていないので、cssでfont-weight: bold;とかにしてもあまり変化がないんです…これだとコーディングする時困りますよね。。

ここで重要なのは、太さを2つ選択すること！！①普通の文字の太さ、と②太くした時の太さ、の2つを選択します。

【選択方法】

これでfont-weight: bold;にした際も文字が太くなり、区別がつきやすいフォントになります！
ぜひ活用してみてくださいね！

先日初めて動画編集講座というものを開きました。誰かに教えることは初めて＋1人だったのでとても緊張しまくりでした…
誰かに教えるって難しい！！

でも誰かに教えることで、自分の理解も深まるし勉強になりますね。次回はもっと落ち着いて話せるように工夫したいです。相手が何を求めて動画編集講座を受けにきてくださっているのかちゃんと考えて、講座の内容をじっくり考えていきます。

講座を受けにきてくださった方の力になれるようosawa頑張ります🔥

先日久しぶりに社長、rikuさん、iijimaさんとお昼に行ってきました。1人だとなかなか新地開拓しない人なので、新しい場所に行けて大大大満足です！

そして今日はtagawaさんとお昼に行くことができたので、今週は幸せなお昼時間を過ごすことができました〜

実はずっと社内メンバーとお昼に行きたかったのですがなかなかタイミングが合わず…＋最近は忙しい毎日で元気なかったので、久しぶりにお邪魔できてとっても嬉しかったです。

なんだか入社した頃を思い出しました。やはり誰かと食べるご飯はいつも以上に美味しく感じますね。

また機会があれば、お邪魔＆ご一緒させてください♪

ということで今週もお疲れ様でした！

関連記事