Google Fonts を使ってみる

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

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

Google Fontsを使ってみる

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

Google Fontsを使ってみる

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

Google Fontsを使ってみる

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

Google Fontsを使ってみる

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

Google Fontsを使ってみる

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

<link href="https://fonts.googleapis.com/css?family=Joti+One" rel="stylesheet">

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Joti+One" rel="stylesheet">
<style type="text/css">
body {
    font-family: 'Joti One', cursive;
}
</head>
<body>
<p>This is a pen.<br>
日本語対応していません。
</p>

</body>
</html>

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

Google Fontsを使ってみる

@IMPORTを使用する方法

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="./test.css"> <!-- 外部ファイル -->
</head>
<body>
<p>This is a pen.<br>
日本語対応していません。
</p>

</body>
</html>

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

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Joti+One');
body{
    font-family: 'Joti One', cursive;
}

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

Google Fontsを使ってみる

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

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

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

@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
    font-family: 'Noto Sans Japanese', serif;
}

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

Google Fonts を使ってみる

コメント

タイトルとURLをコピーしました