婚活・恋活・再婚マッチング【マリッシュ(marrish)】
Skypeを使用しない独自のシステム【ECCオンラインレッスン】
リゾートバイト派遣業界No1の求人サイト【リゾバ.com】
次はあなたが出会う番です♡【ラブサーチ】

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内に貼付けます。

[html]

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

[/html]

 

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

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

[html]

font-family: ‘Roboto Slab’, serif;

[/html]

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

 

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

婚活・恋活・再婚マッチング【マリッシュ(marrish)】
Skypeを使用しない独自のシステム【ECCオンラインレッスン】
リゾートバイト派遣業界No1の求人サイト【リゾバ.com】
次はあなたが出会う番です♡【ラブサーチ】