Google Fontsとは、Googleが提供している無料のフォントです。商用利用も可能です。
こちらにアクセスします。
とりあえず試してみたいので「Joti One」の＋ボタンをクリックします。するとブラウザの下部に以下が表示されます。
「Family Selected」をクリックします。
「CUSTOMIZE」をクリックします。
使いたいものにチェックを入れ、「EMBED」をクリックします。
「STANDARD」の以下をコピーしましょう。
|
1 |
<link href="https://fonts.googleapis.com/css?family=collection-drawer-emphasized-code">Joti+One" rel="stylesheet"> |
上記を<head></head>タグ内に記述します。以下、例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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=collection-drawer-emphasized-code">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を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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は以下のように記述します。
|
1 2 3 4 5 |
@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を以下のように書き換えてみました。
|
1 2 3 4 5 |
@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の大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
