Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Fonts with Web Design

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Takuji Ikeda Takuji Ikeda
April 13, 2012
Design
6.5k
6

Web Fonts with Web Design

2012/04/12 Morisawa TypeSquare Tie-up Seminor on Pasona Tech.

Avatar for Takuji Ikeda

Takuji Ikeda

April 13, 2012

More Decks by Takuji Ikeda

See All by Takuji Ikeda
20131101JAGAT_short.pdf
Avatar for Takuji Ikeda tikeda
1
230
UI for everyday's cooking
Avatar for Takuji Ikeda tikeda
39
18k
Patterns of UI Design
Avatar for Takuji Ikeda tikeda
3
1k
Sass for everyday's cooking
Avatar for Takuji Ikeda tikeda
21
2k

Other Decks in Design

See All in Design
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
180
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
940
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
670
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
310
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
850
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
190
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
650
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.6k
2026年5月24日Redesigner Career Jamご参加者様ご案内資料
Avatar for BASE, Inc. base
PRO
0
180
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
200
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
280

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
150
A Soul's Torment
Avatar for Nat Ma seathinner
6
3k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
960
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
HDC tutorial
Avatar for Michiel Stock michielstock
2
720
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.7k
Side Projects
Avatar for Sacha Greif sachag
455
43k

Transcript

  1. Takuji Ikeda Web Fonts with Web Design ޿͕Δ“೔ຊޠ Web Fonts”ͷੈք

    WebσβΠϯʹ“ϑΥϯτ”ΛऔΓೖΕΔͱ͸ʁ ʙ ϞϦαϫ ʮType Squareʯ λΠΞοϓηϛφʔ ʙ 2012/4/12 THU @ύιφςοΫ 12೥4݄16೔݄༵೔

  2. ࣗݾ঺հ •஑ా୓࢘ Takuji Ikeda •ΫοΫύουגࣜձࣾɹσβΠφʔ •http://tikeda.net/ɹ •http://d.hatena.ne.jp/tikeda/ ɹ •Twitter: @tikedaɹ

    •ஶॻʰHTML5ςΫχΧϧϨϏϡʔ ʢϦοΫςϨίϜʣ ʱ 12೥4݄16೔݄༵೔

  3. Twitter Hash Tag #typesquare TwitterͰੋඇͭͿ΍͍͓͍͍ͯͯͩ͘͞ɻ ࠷ޙͷσϞͰօ͞ΜͷͭͿ΍͖Λ࢖͍·͢ɻ 12೥4݄16೔݄༵೔

  4. AGENDA 1. Web Fonts ͜ͱ͸͡Ί 2. ࢖ͬͯΈΑ͏ Web Fonts 3.

    ʮ࢖͑Δٕज़ʯʹ͢ΔҝͷڧΈͱऑΈ 4. ࣮ફʮTypeSquareʯ 5. Web Fontsʹ࢖ΘΕͳ͍ҝͷ৺ಘ 12೥4݄16೔݄༵೔

  5. 1 Web Fonts ͜ͱ͸͡Ί 12೥4݄16೔݄༵೔

  6. Web Fonts ద༻લ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

  7. Web Fonts ద༻ޙ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

  8. Web Fonts ద༻ޙ Jun 501 Jun 201 Fredoka One http://demo.tikeda.net/webfont/demo1.html

    ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

  9. ͜Ε·Ͱ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 12೥4݄16೔݄༵೔

  10. Web Fontsͷొ৔ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 12೥4݄16೔݄༵೔

  11. Web FontsΛར༻͢ΔࣄͰɺ WebͷςΩετΛݟΔଆͷ؀ڥ ʹؔΘΒͣҙਤͨ͠ϑΥϯτͰ Web PageΛݟͤΔࣄ͕Ͱ͖Δ 12೥4݄16೔݄༵೔

  12. ࣄྫ঺հ ւ֎ͷࣄྫ / αʔϏεͷࣄྫ / ࠃ಺ͷࣄྫ / ৽ͨͳࢼΈ 12೥4݄16೔݄༵೔

  13. http://nikebetterworld.com/ Nike Better World ࣄྫ঺հʢԤถαΠτʣ 12೥4݄16೔݄༵೔

  14. http://nikebetterworld.com/ Nike Better World ࣄྫ঺հʢԤถαΠτʣ Din Display Pro Thin NikeGratton

    12೥4݄16೔݄༵೔

  15. http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫ঺հʢԤถαΠτʣ 12೥4݄16೔݄༵೔

  16. http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫ঺հʢԤถαΠτʣ bello-caps oxtail

    omnes-pro 12೥4݄16೔݄༵೔

  17. http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫ঺հʢԤถαΠτʣ 12೥4݄16೔݄༵೔

  18. http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫ঺հʢԤถαΠτʣ corner-store-1 bello-caps-1 12೥4݄16೔݄༵೔

  19. http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫ঺հ 12೥4݄16೔݄༵೔

  20. http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫ঺հ Frutiger LT W01 65

    Bold EgyptianSlateW01-Medium 12೥4݄16೔݄༵೔

  21. http://flavors.me/ Flavors.me ࣄྫ঺հʢServiceʣ 12೥4݄16೔݄༵೔

  22. http://flavors.me/ Flavors.me ࣄྫ঺հʢServiceʣ Richard Miller rnd book 12೥4݄16೔݄༵೔

  23. http://typesquare.com/ TypeSquare ࣄྫ঺հʢ೔ຊʣ 12೥4݄16೔݄༵೔

  24. http://typesquare.com/ TypeSquare ࣄྫ঺հʢ೔ຊʣ ৽ΰ M UD ৽ΰ M 12೥4݄16೔݄༵೔

  25. http://pr.fontplus.jp/ Web Designing ΢ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫ঺հʢ೔ຊʣ 12೥4݄16೔݄༵೔

  26. http://pr.fontplus.jp/ Web Designing ΢ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫ঺հʢ೔ຊʣ FOT-ஜࢵΦʔϧυ໌ே Pro R FOT-ஜࢵ໌ே Pro

    B 12೥4݄16೔݄༵೔

  27. http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫ঺հʢ೔ຊʣ 12೥4݄16೔݄༵೔

  28. http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫ঺հʢ೔ຊʣ deco-BokutohRuika02 12೥4݄16೔݄༵೔

  29. http://pictos.cc/font/ PICTOS ৽͍͠Web Fontsͷ࢖ΘΕํ 12೥4݄16೔݄༵೔

  30. CSSʹΑΔ࣮૷ํ๏ CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/ 12೥4݄16೔݄༵೔

  31. CSSʹΑΔ࣮૷ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.woff”) format(“woff”); } h1

    { font-family: “FontName”, sans-serif; } 12೥4݄16೔݄༵೔

  32. CSSʹΑΔ࣮૷ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.eot?#iefix”) format(“eot”), url(“FontName.woff”) format(“woff”),

    url(“FontName.truetype”) format(“truetype”), url(“FontName.svg”) format(“svg”); } ※ http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax 12೥4݄16೔݄༵೔

  33. ϑΥϯτܗࣜ •.eot (Embedded Open Type) Internet Explorer 8ҎԼʹରԠ͢Δಠࣗܗࣜ •.woffʢWeb Open

    Font Formatʣ ࠷৽ϒϥ΢β͕ରԠΛ࢝Ίͨ΢Σϒઐ༻ܗࣜ •.ttfʢTrue Typeʣ ύιίϯͰೃછΈ͋ΔੜͷϑΥϯτܗࣜ •.svg WebͷϕΫλʔσʔλܗࣜΛϑΥϯτʹԠ༻ 12೥4݄16೔݄༵೔

  34. Web Fontsͷ৘ใݯ ࠃ಺֎ͷ࠷৽ࣄྫɺCSS࣮૷ঢ়گͳͲ৘ใΛಘΔखஈ 12೥4݄16೔݄༵೔

  35. http://blog.petitboys.com ϑΥϯτϒϩά Web Fontsͷ৘ใݯ 12೥4݄16೔݄༵೔

  36. http://blog.typekit.com/ The Typekit Blog Web Fontsͷ৘ใݯ 12೥4݄16೔݄༵೔

  37. http://blog.fonts.com/ fonts.com blog Web Fontsͷ৘ใݯ 12೥4݄16೔݄༵೔

  38. ࢖ͬͯΈΑ͏Web Fonts 2 12೥4݄16೔݄༵೔

  39. Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β࢖͏ •࢖͍͍ͨϑΥϯτΛ·ͣ͸୳͢ͱ͜Ζ͔Β 12೥4݄16೔݄༵೔

  40. Web FontsαʔϏεΛར༻͢Δ 12೥4݄16೔݄༵೔

  41. http://typesquare.com/ TypeSquare ࠃ಺ 12೥4݄16೔݄༵೔

  42. http://webfont.fontplus.jp/ ϑΥϯτϓϥε ࠃ಺ 12೥4݄16೔݄༵೔

  43. http://decomoji.jp/ σί΋͡ ࠃ಺ 12೥4݄16೔݄༵೔

  44. http://amanaimages.com/font/web/index.aspx amana images ࠃ಺ 12೥4݄16೔݄༵೔

  45. http://typekit.com/ typekit ւ֎ʢԤจϑΥϯτʣ 12೥4݄16೔݄༵೔

  46. http://www.google.com/webfonts Google web fonts ւ֎ʢԤจϑΥϯτʣ 12೥4݄16೔݄༵೔

  47. TypeSquare ར༻ͷྲྀΕ http://typesquare.com/ 12೥4݄16೔݄༵೔

  48. STEP1: Ϣʔβʔొ࿥ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  49. STEP2: ίʔεͷબ୒ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  50. STEP3: ৘ใͷೖྗ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  51. STEP4: ϩάΠϯ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  52. STEP5: ར༻αΠτͷొ࿥ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  53. STEP6: JavascriptͷுΓ෇͚ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  54. STEP7: ར༻ϑΥϯτͷબఆ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  55. STEP8: PV਺Ϩϙʔτ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

  56. ϑΥϯτΛߪೖͯࣗ͠લαʔόʔͰ࢖͏ 12೥4݄16೔݄༵೔

  57. http://www.myfonts.com/ My Fonts Web Fontsʹ࢖͑ΔϑΥϯτΛߪೖ 12೥4݄16೔݄༵೔

  58. http://www.fontshop.com/fontlist/n/web_fontfonts/ Font Shop Web Fontsʹ࢖͑ΔϑΥϯτΛߪೖ 12೥4݄16೔݄༵೔

  59. http://webfonts.fonts.com/en-US Fonts.com Web Fontsʹ࢖͑ΔϑΥϯτΛߪೖ 12೥4݄16೔݄༵೔

  60. My FontsͰϑΥϯ τߪೖ http://www.myfonts.com/ 12೥4݄16೔݄༵೔

  61. MyFonts τοϓ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

  62. ر๬ͷϑΥϯτΛߪೖ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

  63. μ΢ϯϩʔυ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

  64. μ΢ϯϩʔυϑΝΠϧ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

  65. HOW TO ? MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

  66. ࢖͍͍ͨϑΥϯτΛ·ͣ୳͢ 12೥4݄16೔݄༵೔

  67. http://typesquare.com/simulator/ Ϋϥ΢υϑΥϯτ ɾ γϛϡϨʔλ ৭ʑͳύλʔϯΛࢼͯ͠ΈΔ 12೥4݄16೔݄༵೔

  68. http://www.myfonts.com/WhatTheFont/ WhatTheFont ը૾͔ΒϑΥϯτΛೝࣝ 12೥4݄16೔݄༵೔

  69. http://itunes.apple.com/jp/app/whatthefont/id304304134 WhatTheFont for iOS ը૾͔ΒϑΥϯτΛೝࣝ 12೥4݄16೔݄༵೔

  70. http://fount.artequalswork.com/ Fount ΢ Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 12೥4݄16೔݄༵೔

  71. http://chengyinliu.com/whatfont.html WHAT FONT TOOL ΢ Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 12೥4݄16೔݄༵೔

  72. http://www.freefontconverter.com/ FreeFontConverter ख࣋ͪͷϑΥϯτΛม׵ 12೥4݄16೔݄༵೔

  73. http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม׵ 12೥4݄16೔݄༵೔

  74. http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม׵ ϥΠηϯεʹ͸ཁ஫ҙ 12೥4݄16೔݄༵೔

  75. Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ ͙͢ʹ࢝ΊΒΕΔɻ Ͱ΋ແྉͩͱ੍ݶ͕͋Δ΋ͷ ͕ଟ͍ɻʮTypeSquareʯ͸ແྉఏڙத •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β࢖͏ Ұ൪Φʔι υ

    ο Ϋ εͰඞཁͳεΩϧͷशಘ͕Ͱ͖Δɻ •࢖͍͍ͨϑΥϯτΛ·ͣ͸୳͢ͱ͜Ζ͔Β ࠓ͙͢Ͱ͸ͳͯ͘΋ɺ ײ౓͸͓͚͋͛ͯΔखஈ 12೥4݄16೔݄༵೔

  76. ʮ࢖͑Δٕज़ʯ ʹ͢ΔҝͷڧΈͱऑΈ 3 12೥4݄16೔݄༵೔

  77. ڧΈ 12೥4݄16೔݄༵೔

  78. ΢ΣϒαʔϏεͳͲͷ ಈతίϯςϯπͷσβΠϯ 12೥4݄16೔݄༵೔

  79. جຊతͳσβΠϯͷखॱ ίϯςϯπ 12೥4݄16೔݄༵೔

  80. σβΠϯ جຊతͳσβΠϯͷखॱ ίϯςϯπ 12೥4݄16೔݄༵೔

  81. σβΠϯ ίϯςϯπ ίϯςϯπ͋Γ͖Ͱ σβΠϯΛߟ͑8FC 1BHFͷ࡞੒Λߦ͏ جຊతͳσβΠϯͷखॱ 12೥4݄16೔݄༵೔

  82. σβΠϯ ΢ΣϒαʔϏεσβΠϯͷखॱ 12೥4݄16೔݄༵೔

  83. σβΠϯ ΢ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ 12೥4݄16೔݄༵೔

  84. σβΠϯ ΢ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ ݩ͋ΔσβΠϯΛબΜ ͰίϯςϯπΛϢʔ βʔ͕ྲྀ͠ࠐΉҝޙ͔ Β࠷దͳσβΠϯΛࢪ ͤͳ͍ 12೥4݄16೔݄༵೔

  85. http://d.hatena.ne.jp/tikeda/ tikeda::Diary What’s Web Font 12೥4݄16೔݄༵೔

  86. What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ 12೥4݄16೔݄༵೔

  87. What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ Cabin Sketch 12೥4݄16೔݄༵೔

  88. What’s Web Font 12೥4݄16೔݄༵೔

  89. ϕΫλʔσʔλΛੜ͔ͨ͠σβΠϯ 12೥4݄16೔݄༵೔

  90. Responsive Design http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

  91. CSS3 Design ※ http://blog.typekit.com/2012/03/08/parkinson-type-design-joins-typekit/ 12೥4݄16೔݄༵೔

  92. ౷Ұੑͱ֦ுੑΛ݉ͶͨσβΠϯ 12೥4݄16೔݄༵೔

  93. ౷Ұੑͱ֦ுੑΛ݉ͶͦΖ͑ͨσβΠϯ No Image Design ϖʔδͷ֦ு http://demo.tikeda.net/webfont/demo2.html 12೥4݄16೔݄༵೔

  94. ऑΈ 12೥4݄16೔݄༵೔

  95. ϑΥϯτදࣔͷλΠϜϥά 12೥4݄16೔݄༵೔

  96. ϑΥϯτදࣔͷλΠϜϥά •Web FontsΛࢦఆͨ͠ςΩετ͕Ұॠന͘ݟ͑ͳ ͍ঢ়ଶʹͳΔ͜ͱ͕͋Δ •Web Fontsʢ࿨จʣΛࢦఆͨ͠ςΩετ͕࠷ॳͰ όΠεϑΥϯτ͕දࣔ͞Ε͠͹Βͯ͘͠Web Fonts͕దԠ͞ΕΔ 12೥4݄16೔݄༵೔

  97. σϞʹΑΔݕূ •σόΠεϑΥϯτ •શମʹԤจWeb Fontsͷࢦఆ •શମʹ࿨จWeb Fontsͷࢦఆ •෦෼తʹ࿨จͱԤจͷWeb Fontsͷࢦఆ •࿨จϑΥϯτͷදࣔʹϑΣʔυΛదԠ http://demo.tikeda.net/webfont/demo3.html

    12೥4݄16೔݄༵೔

  98. ςΩετͷϨϯμϦϯά 12೥4݄16೔݄༵೔

  99. •Windows Chrome, FirefoxͰάϦϑ͕Ԛ͍ •αΠζ͕໿18pxҎԼͩͱϥΠϯ͕௵Εͯݟ͑Δ΋ ͷ͕͋Δ ςΩετͷϨϯμϦϯά 12೥4݄16೔݄༵೔

  100. http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 12೥4݄16೔݄༵೔

  101. http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 12೥4݄16೔݄༵೔

  102. http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά -webkit-text-stroke: 0.5px #000 12೥4݄16೔݄༵೔

  103. ࣮ફʮTypeSquareʯ 4 12೥4݄16೔݄༵೔

  104. Twitter λΠϜϥΠϯΛ࢖ͬͨσϞ http://demo.tikeda.net/webfont/ 12೥4݄16೔݄༵೔

  105. λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱ΢ΣΠτ͕̑ஈ֊ʹมԽ 12೥4݄16೔݄༵೔

  106. λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱ΢ΣΠτ͕̑ஈ֊ʹมԽ 26 px 32 px 54 px 110

    px 18 px 12೥4݄16೔݄༵೔

  107. λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ಺༰͔Β4छྨʹ৭ͱfont-family͕มԽ 12೥4݄16೔݄༵೔

  108. λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ಺༰͔Β4छྨʹ৭ͱfont-family͕มԽ Haruhi Gakuen Shin Go DeBold Shin Maru

    Go Bold Pretty Momo 12೥4݄16೔݄༵೔

  109. ΞΠίϯΛWeb FontsΛ࢖ͬͯදݱ 12೥4݄16೔݄༵೔

  110. ΞΠίϯΛWeb FontsΛ࢖ͬͯදݱ http://www.myfonts.com/fonts/urtd/ico-weather/ Ico Weather 12೥4݄16೔݄༵೔

  111. ΞΠίϯΛWeb FontsΛ࢖ͬͯදݱ http://fortawesome.github.com/Font-Awesome/ Font Awesome 12೥4݄16೔݄༵೔

  112. Responsive Design ʹରԠ 12೥4݄16೔݄༵೔

  113. Twitter λΠϜϥΠϯΛ࢖ͬͨσϞ •λΠϜϥΠϯςΩετΛWeb FontsʮTypeSquareʯ Λ࢖ͬͯදݱɻ ৚݅ʹΑΓϑΥϯτΛμ ΠφϛοΫ ʹมߋ •ΞΠίϯΛWeb FontsΛ࢖ͬͯදࣔ

    •Responsive Designɹ •CSS3ʹΑΔϑΣʔυΤϑΣΫτͰදࣔ http://demo.tikeda.net/webfont/ 12೥4݄16೔݄༵೔

  114. Web Fontsʹ࢖ΘΕͳ͍ҝͷ৺ಘ 5 12೥4݄16೔݄༵೔

  115. ࠷ޙʹ •஌ࣝͱ͚ͯͩ͠Ͱͳ͘ɺ·ͣԿ͔࢖ͬͯΈΑ͏ •ࣗ෼ͷ໨ͰͦΕ͕ɺWeb Fontsͷग़൪ͳͷ͔Λ ͪΌΜͱ൑அ͢Δ •ը૾͸ը૾ͷྑ͕͋͞ΔɻWeb Fonts͸ը૾ͷ ୅༻඼Ͱ͸ͳ͍ •ͪΌΜͱݕূΛ͠Α͏ ͦͷઌʹϢʔβʔ͕͍ΔࣄΛৗʹ๨Εͣʹ

    12೥4݄16೔݄༵೔

  116. ࠷ޙʹ ද ݱ ํ ๏ ͸ ແ ݶ େ 12೥4݄16೔݄༵೔

  117. ࠷ޙʹ Web Fonts͕ࠓޙͲ͏ͳ͍͔ͬͯ͘͸ɺ ͦͷٕज़Λ࢖ͬͨදݱ͕ຊ౰ʹϢʔβʔ͕ ٻΊ͍ͯΔ෺ͳͷ͔ʹ͔͔͍ͬͯΔͱࢥ͍ ·͢ɻ ٕज़ͷਐԽΛͪΌΜͱཧղ͠ɺ ΑΓૉఢͳ ωοτࣾձʹ͍͖ͯ͠·͠ΐ͏ɻ 12೥4݄16೔݄༵೔

  118. Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ͝ҙݟ ɾ ࣭͝໰͸ͪ͜Β·Ͱ [email protected] twitter @tikeda, http://tikeda.net/ 12೥4݄16೔݄༵೔