当サイトの記事には広告が含まれている場合があります

GoogleWebフォントは読み込むだけで簡単に使える

key_google-fonts
 
最近Webフォント流行ってますよね。
海外だと英数字なのでWebフォントたくさんありますが、日本語Webフォントは限られますし、有料なことも多いです。

今回、数字部分だけWebフォントを使用するサイトのコーディングがあり、初めてGoogleWebフォントを利用したので、メモしておきます。

まずは、GoogleWebフォントサイトで設定したいフォントを探します。
左サイドでいろいろと検索ができます。
01_google-fonts
 

任意の文字列「bubble」で検索してみました。
該当するものが表示されたので、Webフォントで使用したいもの「→」マークをクリックします。
02_google-fonts
 

設定画面に遷移します。
03_google-fonts
 

「3. Add this code to your website:」に記述されている内容と、ご自身のサイトに書いてください。
link指定、import指定、Javascript指定ができますが、今回はlink指定にしました。
htmlのタグ内に四角で囲んだ部分をコピペします。

04_google-fonts
 
今回だと、こんな風にhtmlに書きます。

<head>
・・・
<link href='https://fonts.googleapis.com/css?family=Bubblegum+Sans' rel='stylesheet' type='text/css'>
・・・
</head>

 

次に「4. Integrate the fonts into your CSS:」に記述されている内容をcssに書いてください。

05_google-fonts
 

h2 {font-family: 'Bubblegum Sans', cursive;}

 

DEMO

くるりん

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
html・css
スポンサーリンク
くるりんをフォローする
Memorandums