日本語が大量追加されたGoogle フォントでWebページを作ろう!!!


フォント大好きパブロンです。
2回にわたりgoogleFontに追加された日本語を紹介しました!

では早速前回紹介したgoogleの日本語フォントを利用したページを作りたいと思います。

先日Githubでゲットしたページをカスタマイズしてみましょう。(手抜きではありません。)
とてもインタラクティブですね。(オープンソース最高!)

007

使いたいフォントを宣言する

今回使いたいフォントはニコモジ!と
Rounded M+ 1cと大好きなNoto Sansです!
まずHTML上でこのフォントを使うよ!って宣言します!
ちょうど8行目にMontserrat使うよ!って書いてあるので上書きします!
ちなみにMontserratはGothamに似てて人気ありますね。。。

000001

こんな感じです!
h1やPもついでに修正しました!

h1 カブシキガイシャ ロータス
p ペッパーに会いに来てね!
btn マップ

h1のスタイル(CSS)にフォントはニコモジを使うよ!と指示する!

早速h1の文字をカブシキガイシャ ロータスに変えたいと思います!
宣言してるので、CSSにfont-family: “Nico Moji”;と追加するだけです。


こんな感じです!

pのスタイル(CSS)にフォントはRounded Mplus 1cを使うよ!と指示する!

その下の

の中にペッパーに会いにきてね!を入れているので、
CSSのpの中にfont-family: “Rounded Mplus 1c”;と追加します。
少し太くしたいですよね?
font-weight: bold;を追加しましょう!

簡単ですね!

ボタンの中のテキストのスタイル(CSS)にフォントはNoto Sansを使うよ!と指示する!

ボタンの中のマップという文字は大好きなNoto Sansを追加しましょう!


出来上がりです!!

googleFontは簡単ですね!

出来上がりはコチラ!

0000005

出来上がったサンプルはコチラご確認下さい!
http://lotus-creative.net/fontlotus/

ご覧のとおり、Googleフォントは使い方がとっても簡単なのでぜひ自分のWebサイトなどで使ってみて下さい!!

関連記事