[み]1分くらいでできるからWebFontの使い方を覚えよう

Web Font を使うと、PCにインストールされていないフォントでも表示させることができます。見出しなどに特殊なフォントを使おうとするときに、わざわざ画像をつくって用意したりする手間を省くことができるというすっごく便利なのがWeb Font です。

今回は、みはら.comのロゴをWeb Font で表示してみます。

Web Font をつかう準備

まず、HTMLを準備しておきます。

<html>
<head>
<title>みはら.com</title>
<style type="text/css">
    #logo {
        font-size: 60px;
    }
</style>
</head>
<body>
<p id="logo">miha5.com</p>
<p>みはら.com だよ。</p>
</body>
</html>

準備はこれだけです。これをブラウザで見るとこんな感じです。

Web Font を導入

今回はたぶん一番カンタンに使えるGoogle Web Fonts を使います。

ずらずらーっとフォントが並んでるので、そのなかから使いたいなーっていうフォントを探します。あ、これだ!っていうフォントを見つけたら、「Quick-use」をクリックします。

そうすると、わかりやすい導入の手順が表示されますので、まずは、フォントを読み込みます。

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

これを<head>の中に追加します。
そして、CSSに次のを追加します。

font-family: 'Paytone One', sans-serif;

これだけです。

できあがり

できあがったのが、これ。

<html>
<head>
<title>みはら.com</title>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<style type="text/css">
    #logo {
        font-size: 60px;
        font-family: 'Paytone One', sans-serif;
    }
</style>
</head>
<body>
<p id="logo">miha5.com</p>
<p>みはら.com だよ。</p>
</body>

ブラウザで表示するとこんな感じです。

かなりカンタンにできるんで、ぜひどうぞ。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup