Why not DIY Symbol Fonts?

No more CSS Sprites!

Transcript

1. No more CSS Sprites! Why not DIY Symbol Fonts?  Tsutomu Kawamura  facebook.com/cognitom
2.  Tsutomu Kawamura  facebook.com/cognitom 
   0QFO4PVSDF
   $BGF
   4IJNPLJUB[BXB 
   -JCSJ[F
   DPOOFDU
   ZPVS
   MJCSBSZ
   UP
   UIF
   XPSME 
   $PXPSLJOHDPPQ
   +BQBO $PHOJ5PN
   "DBEFNJD
   %FTJHO
   
   #PPL1SFTT
   
   +BQBO
   0QFO
   #VTJOFTT
   4PGUXBSF
   "TTPDJBUJPO
   
   DPODUFU
   +BQBO
   
   $PEFS%PKP
   5PLZP
3. )FMMP
4. -FU`T
   UBML
   BCPVU
   UIFTF
5. 4ZNCPM
   GPOUT icon fonts?
6. 'PS
   FY UIJT
7.  "OE
   UIJT
8. "MTP
   UIJT
   JT '0/5
9. Webdings  Wingdings  Arial ABCDEFGHI 8F`E
   LOPXO
   UIFN
   XFMM
10. 8FC
    'POUT
11. -JLF
    UIJT
12. BOE
    UIJT
13. %FBEMZ
    FBTZ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=Tangerine" />
14. TTF EOT WOFF SVG IE 4 ✔ IE 9 ✔ ✔ FireFox 3.5 ✔ FireFox 3.6 ✔ ✔ Safari 3.1 ✔ ✔ Safari 5.1 ✔ ✔ ✔ Chrome 4 ✔ ✔ Chrome 6 ✔ ✔ ✔ iOS 4.0 ✔ iOS 4.2 ✔ ✔ iOS 5.1 ✔ ✔ ✔ Android 2.2 ✔ Android 3.1 ✔ ✔ Android current ✔ ✔ ✔ #SPXTFS 4VQQPSUT
15. icon fonts met web.
16.  @font-face { font-family: 'Symbols'; src: url('Symbols.ttf') format('truetype'); } <span class=”symbol-good”></span> <span class=”symbol”>good</span> <i class=”symbol-good”></i> FY FY FY
17. 4NPPPPPUI
    3FUJOB
    3FBEZ
    
18. $PMPS
    $POUSPM
    CZ
    $44
19. Octicons Font Awesome
20. send him an iMac
21. http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/
22. •G IF •Transparent PN G •CSS Sprites •SVG ? •W eb Font • Use PUA • Ligature • ???
23. Responsive Web Design Mobile Support / Retina Flat Design Trend 2012 2011 2013 Font DIY
24. FontAwesome, ...etc. Need some extra original icon FontAwesome + Extra PNG Icon Double standards DIY Fonts  Why not DIY?
25. 0I
    
    )PX
    UP
    NBLF TVDI
    B
    GPOU
26. FontForge was great, but...
27. Glyphs mini ¥3,900
28. %FTJHOFST
    EPFTO`U
    HFU
    NBE JO
    FWFSZEBZ
    VTF
29. OTF TTF WOFF EOT SVG 5IJOL $SFBUF $POWFSU $IFDL
30. $IFDL
    PVS
    5FNQMBUF PO
    (JU)VC github.com/cognitom/symbols
31. $PODMVTJPO
32. CSS Sprites? Icon Fonts! ?
33. -JNJUFE
    HFFLT
    NBEF
    GPOUT "MM
    XFC
    EFTJHOFST
    NBLF
    GPOUT 1BTU 'SPN
    OPX
34. 5IBOL
    ZPV