心はいつもAirPucci (空元気でもいいから)

毎日がPucciを着ているような気分

Google Webfont使ってみたよ

      2012/01/07


地元に戻ってきてまず思ったのは「観光サイトを立ち上げたい」ということ。いや、観光サイトはオフィシャル勝手サイト沢山あるのですがどれもステレオタイプで正直ウザい。田舎者目線で魅力がないんですよね。そりゃそうだ。地元を出ることができない人間に首都圏オサレ女子のテイストなんてわかるはずないもの。結果すべてが的外れ。もったいない。

首都圏オサレ女子がiPhone片手に車なしで楽しめる観光情報サイトが作りたいのです。とうことで、HTML5+CSS3、レスポンシブwebデザインで技術的な方向性は決定。なるべくファイル読み込み少なくしたいので、Webフォントにも挑戦してみたいな~と思いやってみました。

Webフォントサービスもたくさんあるようですが、まずはGoogleさんのWebfontサイトへGo!

Start choosing fontをクリックするとトップページへ。

使ってみたいフォントを探し、Add to Collectionを押します。今回はAmatic SCというのを選択しました。

右下にあるuseを押すとこの画面に。ここでlink relとcssコードを書き出してくれます。Amatic SCはフォントの太さが2種類から選べました。

選ぶと、画面下の方にlink relとcssコードが出ます。それぞれファイルにコピペすればOK.


こんな風に表示できました。
CSSには、上から順に

h1{font-family:’Terminal Dosis Light’,arial, serif;}
h2{font-family:’Cabin Sketch’, cursive;}
h3{font-family: ‘Amatic SC’, cursive;}

と記述しています。

ん~簡単だしフォント買わずに済むし楽しい。日本語が使えないのが残念です。Webフォントサービスはgoogle以外も始めているので、探してみたいと思います。

 - テクニカル

Message

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

  関連記事

初めてのRuby8章 8.2変数と定数

8.2 変数と定数 8.2.1 インスタンス変数 @で始まるのがインスタンス変数 …

OpneSSL,Readline,Libyamlをインストールする

先ほどインストールしたHomebrewを使って、rbenvをインストールしたいと …

もうあかん!Mac OSXのスクロールを逆にする

OSXのいつのバージョンからだっけ? スクロールの向きが突如逆になったんですよね …

twitterと連携した写真のライブラリー

iPhoneを使うようになってから気軽に写真撮影し、そのままtwitter投稿す …

no image
before_actionが定義してある。

ruby on rails3プリケーションプログラミングの本の内容をruby2. …

吉瀬美智子さんが美しすぎて、新サイト作りました

以前からやりたいと思っていたのですが、吉瀬美智子さんが美しすぎてやる気がでました …

no image
@で始まるのが インスタンス変数

@ で始まるのが インスタンス変数 大文字で始まるのが 定数 文法書のどこに書い …

no image
Gitをインストールする

Rails開発がしたいのですが、今後必要になるでしょうからGitをインストールし …

no image
「Follow me」バッジのつけ方。

ブログの横についている「Follow me」バッジ。いろんな方がつけているのを見 …

no image
あんたのrakeは新しいけど古いのが必要なんだよっ!!と怒られた

Mavericksってrubyが2.0になったんですね。 てのはおいといて、 r …