• ← and → to move around.
• Ctrl/Command and + or - to zoom in and out if slides don’t fit.
• S to view page source.
• T to change the theme.
• H to toggle syntax highlight.
• N to toggle speaker notes.
• 3 to toggle 3D effect.
• 0 to toggle help.

• ひらい さだあき
• about.me/sada_h / @sada_h / techlog
• SIerで働いてます。Javaやってます。
• すきなAPI
  • Web Storage / File API / Web Fonts
• Zen-Codingについて執筆しました
  • もしも10分の1の行数でHTMLが書けたら ＠IT
  • Zen-Codingを使いこなして、マークアップを楽しもう ＠IT
• Zen-Coding関連で作ったもの
  • Chrome Extension : Zen-Coding Textarea Extension
  • UserScript : Zen-Coding Textarea UserScript

How to use WebFonts? / Google Web Fonts / WebFonts Sample

see also Saving generated files on the client-side - HTML5Rocks Updates

WebFonts Sample

var ctx = document.getElementById("canvas-area").getContext("2d");
ctx.textAlign    = "center";
ctx.textBaseline = "middle";
document.getElementById("canvas-draw1").addEventListener("click", function(event) {
  ctx.fillStyle = "red";
  ctx.font = "72px 'Monofett', cursive";
  ctx.fillText("WebFonts", 400 , 50);
});

Effects / Effects + WebFonts

see also HTML5 Rocks - Typographic effects in canvas

WebFonts SVG Sample

<g id="gtext" fill="#009900">
    <text x="10" y="10" font-size="56" font-family="Monofett">
    <textPath xlink:href="#circlePath">Chrome+HTML5 Conference</textPath>
    </text>
</g>

see also スタートアップ SVG：第3回　少し高度なSVG｜gihyo.jp … 技術評論社

Test HTML

see also WhatFont - Google Chrome Extension

Test HTML / HTML5Rocks Updates

see also Google Font Previewer - Google Chrome Extension

• WebFontsは簡単に使える！
• WebFontsはいろいろなところで使える！
• 日本語フォントもそろそろ…(もうちょっと簡単にサブセット化できれば…)
  • デコもじ
  • フォントプラス
  • 「TypeSquare（仮称）」を発表 | 株式会社モリサワ
• もちろんフォントの種類が多いと重くなります
• Canvasなどでは preload が必要です
• まずはちょっとしたところから、使ってみるとよいのでは？