Google Fontsとは、Googleが提供している無料のフォントです。商用利用も可能です。
こちらにアクセスします。
とりあえず試してみたいので「Joti One」の＋ボタンをクリックします。するとブラウザの下部に以下が表示されます。
「Family Selected」をクリックします。
「CUSTOMIZE」をクリックします。
使いたいものにチェックを入れ、「EMBED」をクリックします。
「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>こんなフォントになりました。
@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;
}これでも同じフォントで表示されることが確認できます。
日本語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の観点からするとあまりよくないかもしれません。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント