Google Fonts を使ってみる

Google Fontsとは、Googleが提供している無料のフォントです。商用利用も可能です。

こちらにアクセスします。

Google Fontsを使ってみる

とりあえず試してみたいので「Joti One」の+ボタンをクリックします。するとブラウザの下部に以下が表示されます。

Google Fontsを使ってみる

「Family Selected」をクリックします。

Google Fontsを使ってみる

「CUSTOMIZE」をクリックします。

Google Fontsを使ってみる

使いたいものにチェックを入れ、「EMBED」をクリックします。

Google Fontsを使ってみる

「STANDARD」の以下をコピーしましょう。

上記を<head></head>タグ内に記述します。以下、例です。

こんなフォントになりました。

Google Fontsを使ってみる

@IMPORTを使用する方法

「@IMPORT」をクリックして、以下をコピーしてもよいです。

但し、別ファイルのcssファイルに上記を記述します。

index.htmlの<head></head>内で外部ファイルのtest.cssを読み込みます。

test.cssは以下のように記述します。

これでも同じフォントで表示されることが確認できます。

Google Fontsを使ってみる

日本語Webフォント「Noto Sans Japanese」を使用する

Noto Sans japaneseを使うと日本語フォントも表現できるようです。

試しにtest.cssを以下のように書き換えてみました。

以下のように表示されました。表示されるのに非常に時間がかかるので、SEOの観点からするとあまりよくないかもしれません。

Google Fonts を使ってみる

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

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

CAPTCHA