初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。

Google Web Fontsの使い方。

Google web fontsの使い方を説明していきます。

Web fontはページ閲覧者側にCSSのfont-familyで指定したフォントがユーザーのパソコンに入ってない場合でもgoogle web fontsを使えば、制作者の好みのフォントをWEBページ上で使いえるという優れものです。

今までは更新のたびの画像としてアップロードしていた部分がウェブフォントを使えば更新作業も簡単です。

無料で使えるものも多いので使ってみてください。(一部有名どころは有料)

1:まずは、google web fonts のページから使いたいフォントを選びます。

スクリーンショット 2013-05-06 1.25.39

2:右下の灰色のボタン。quick useのツールチップが出てくるボタンをクリック。

スクリーンショット 2013-05-06 1.25.39

 

3:次に使用すフォントの太さ細さを選びます。

スクリーンショット 2013-05-06 1.26.18

 

4:Add this code to your websiteの下のコードをコピペしてhtmlファイルのhead内に貼付けます。


<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>

 

5:htmlにリンクしているCSSファイルのフォントファミリーに下記を記述。フォントファミリー名は下に表示されますのでコピペしてCSSファイルに記述します。

スクリーンショット 2013-05-06 1.26.45


font-family: 'Roboto Slab', serif;

以上で、Google web fontsで選択したフォントが読み込まれるようなります。

 

 

コメントを残す

ダイレクト特集ページ用バナー(ダウンロード版)

初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。