注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

これで簡単にGoogleフォントが使える⭐オシャレなサイトになる!

Googleフォントとは

Googleが提供しているwebフォントサービスです。 Google Fonts
無料(商用利用OK)にもかかわらず、多種多様なフォントが選べます。

Googleフォント

通常、フォントを指定しても閲覧する端末に指定フォントがインストールされていないと、同じ表示ができません。

Googleフォント

Googleフォントだと、どの端末で閲覧しても、指定したフォントの表示で見ることが出来ます。

スポンサーリンク

Googleフォントの表示例

囲み枠の参照先:Purple Lifeさん(https://love-wave.com/css-waku/)
個性的なフォントは、ポイント使いに向いてますね〰でも、Googlefontをここまで使うとウルサイですね。笑

exampleGooglefontの使用例。Press Start 2Pってフォントを使っています。Purple Lifeさんのページには沢山可愛い枠がありました。

Googleフォントを使ってみよう

フォントを選ぶ

Google Fonts (表示が違う場合は上部メニューの「CHECK OUT THE NEW GOOGLE FONTS」をクリックして下さい)

Googleフォントを使ってみよう

2020年3月現在、1000フォント程。
お好みのフォントをクリックして下さい。

Googleフォントを使ってみよう

更にバリエーション一覧が表示されます。(バリエーションが無い場合もあり)
お好みのフォントの+Select this styleをクリックして選択。

Point選択を解除したい場合は、-Remove this style を押すと解除になります。

 

Point他のフォントを追加したい場合は、上部メニューの Browse fonts を押して下さい。

Googleフォントを使ってみよう

フォントを選び終えたら、Embedをクリックしましょう。

スタイルシートにコードをペースト

Googleフォントを使ってみよう

@importをクリック。直ぐ下の<sytle>@import  ...  </style>をスタイルシートにペーストします。

Googleフォントを使ってみよう

CSS rules to specify familiesの下のタグfont-family: ~をスタイルシートにペーストします。

Googleフォント 探し方

一覧の表示を変える

Sentence▼をクリックで、フォント一覧の表示が変わります。アルファベット、長い文章、数字、Custom(カスタム・Type somethingの欄に好きな言葉を入力)が選択できます。

数字がやたら格好良いフォントがあるかも・・・?
Googleフォント

フォントの大きさを変える

Googleフォントを使ってみよう

looks_one をスライドすると、フォントの大きさを変更できます。小さくすると可愛くなるフォントってありますよね。

looks_two 右のくるっとした矢印を押すと初期値に戻ります。

フォントを絞り込み

Categoriesでは、チェックを外したり入れたりして、好みのカテゴリーのみ表示できます。Handwriting(手書き)が好きです。

Languageでは、言語を絞ることができます。Japanese(日本語)もありますよ!

Googleフォントを使ってみよう

ここから(Google Fonts + 日本語)だと、「ニコモジ」と「ニクキュウ」も使えます!このフォントは「ニクキュウ」です。

人気があるフォント

人気があるフォント

Total Views No.1は「Roboto
参照:Google Fonts Analytics
シンプルで読みやすいフォントが上位を連ねています。

エラーがあった時

エラーがあった時

対応していないブラウザでアクセスした時や検索結果で何も見つからなかった時などのエラー表示が顔文字です。
数パターンありますw

私の好きなフォント

個性的なラインナップです(笑)

Londrina Sketch
フォントのリンク

0