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 を使ってみる

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくば、我に七難八苦を与えたまえ」です^^

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

コメントをどうぞ

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

CAPTCHA