心はいつも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

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

  関連記事

no image
iPhoneのKindleアプリでChip Conley氏の本を読んでみました。その2

iPadの発売がようやく発表されました。私個人としては読書端末としての利用を期待 …

no image
RailsTutorial4.0を高速で復習する。6.2.5章。

6.2.5一意性を検証する、です。メールアドレスをIDとして使うため(でなくとも …

BiglobeでWimax契約して怒った

久々にダメサービスに遭遇して怒ったので書きます。 BiglobeでWimax契約 …

no image
MavericksアップデートしRuby2.0+Rails4.0.2にversion upする

何を今さら感ですが、MacはAirとMiniの2台持ちです。Airのほうを人柱と …

no image
RailsTutorial4.0を高速で復習する。6.2.4章。

6.2.4フォーマットを検証する です。 メールアドレスは文字数制限だけじゃだめ …

no image
RailsTutorial4.0を高速で復習する。6.5章。

演習1問目。 リスト6.20の、メールアドレスを小文字に変換するコードに対するテ …

no image
Mac OS Xでftp × Cyberduck

WordPressにプラグインを入れたくてダウンロードしてきました。 そういえば …

no image
RailsTutorial4.0を高速で復習する。9.1.2章。

9.1.2編集の失敗、です。 テストを書きます リスト9.9 ユーザーupdat …

no image
RailsTutorial4.0を高速で復習する。8.2.5章。

8.2.5ユーザー登録と同時にサインインする、です。 ユーザーが登録を行った後、 …

WordPressの管理画面真っ白問題に対処しました

WordPressの自作テンプレを作ったはいいものの、管理画面が真っ白になって投 …