Subscribed unsubscribe Subscribe Subscribe

tikeda's blog

Flower, Plant, Travel, Design, My life stories

はてなダイアリーでGoogle Web Fontsを試す

Google Web Fonts!!

はてなダイアリーは、今のところ多くのWeb Fontサービスが使えないのですが、Google Web Fontsは、無理やり使う事ができました。このブログでも一部使ってみています。

使い方

@import "http://fonts.googleapis.com/css?family=Lobster";
  • 上の@import指定をした、下の行あたりに、フォントを変えたい部分にfont-familyを指定
@import "http://fonts.googleapis.com/css?family=Lobster";

h1 {
  font-family: "Lobster",serif;
}

以上です。
SVG非対応など、ブラウザによっては表示されませんが、ブログタイトル(h1)、日付(h2.date)、モジュールタイトル(.hatena-moduletitle)なんかに、ちょっとしたアクセント程度で使えそうです。ただし、Web Fontに限ったことじゃありませんが、欧文指定していて、利用者が和文に変えた場合、文字サイズが随分大きくなり不恰好になるなどが予想されるので、公開デザインにする時など、配布の際は、その辺も認識した上行った方がよさそうです。

※ちなみにはてなグループでは、@importが使えず、無理っぽかったです。