600以上のフォントから選べる、Google Fontsの使い方

chrome

学校にこもりっぱなし、バイトも辞めたためwebに専念できるようになりました。

Google Fontsの使い方と解説

コピペで簡単実装できますので是非

実践

 

Google fonts へのリンク : https://www.google.com/fonts/

 

適当な文字列でフォントプレビュー

 

ページ中央にあるPreview Text:に適当な文字列を入力

すべてのフォントが希望の文字列に当てはめられプレビューされます、イメージが付きやすいネ!

好みのフォントが決まったら右下のボタン、Quick-use をクリック。

googlefonts

 

フォントの詳細設定

Quick-useの次のページをざっと翻訳、

このページで使うのは3と4!

  1. 希望のスタイル
  2. 文字のセット変更、特に触らなくて良いかと
  3. HTMLに挿入するリンク (コピーして<header>の中に入れちゃってください)
  4. CSSで適応させるコード (メインのスタイルシートに入れてもいいですが、私は ”Fonts.css” というファイルを作って隔離しています。

 

HTML

 

CSS

 

完成

See the Pen RNJzrR by Takeshi Yamashita (@tekeshi) on CodePen.

 

注意

実はこれIE9以下だと反映されませんので注意してください。

反映させる方法もあるということですが今回は割愛です、また気が向いたら方法記載します。

 

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  プロフィール  PR:無料HP  ふくやま自動車学校  社会人 専門学校  アールエスアール  中古ホイール 千葉  タイヤ 軽カー  プログラミング 専門学校  ヘルメット バイク用品  パワーストーン初購入♪  認定心理士  投資顧問ベストプランナー 詐欺  セリカ 202 ターボ  名簿屋