1. Neal Stublen nstublen@jccc.edu

4. Font Limitations  Browsers can only display the fonts installed on the device Arial, Verdana, Times, Georgia  Custom fonts usually meant using images

5. Now: @font-face  Instructs the browser to download a font and make it available @font-face { font-family: ‘fontName’; src: url(…); font-weight: weight; font-style: style; }

6. Font Sources  Specify one or more font sources  Similar to specifying media sources Let the browser choose the supported format src: url(…) format(‘eot’), url(…) format(‘woff’), url(…) format(‘trutype’)

7. Font Types  EOT – proprietary font format for IE4-8  WOFF – Web Open Font Format  OTF – OpenType  TTF – TrueType  SVG – Scalable Vector Graphics (original iPhone)  Compatibility – Table 9.1, caniuse.com

8. EOT Support  IE browsers before IE9 need to be tricked into using a font src: url(‘font.eot?#iefix’), …  But with IE9+: src: url(‘font.eot’); src: url(‘font.eot?#iefix’), … See http://www.fontspring.com/blog/fixing-ie9-font-face- problemshttp://www.fontspring.com/blog/fixing-ie9-font-face- problems

9. Font Property Descriptors  @font-face properties, such as font- weight, don’t control the font – they describe the font @font-face { font-family: ‘MyFont’; font-style: normal } @font-face { font-family: ‘MyFont’; font-style: italic }

10. Unicode Range  Specifies the characters included in the font  May be necessary for specialized fonts or with some languages

11. Applying the Font  Refer to the font as any other font h1 { font-family: MyFont, sans-serif; }  Fallback fonts may be a good idea

12. Adding a Font  Let’s add fonts to the HTML Herald page  Add fonts to @font-face

13. Fonts That Won’t Load  Some browsers (meaning IE) won’t load online fonts for an offline web page  Fonts from other sources, such as Google Fonts, may need to be copied

14. Legal Considerations  You can’t legally copy any font from your computer and use it on the web  Make sure you are licensed to use your font online  Many online resources for web fonts

15. Font Squirrel  If you need to create multiple font files, Font Squirrel can help  Upload a single font format, download multiple font formats

16. Exercise Caution  Downloading fonts can use a lot of bandwidth Do I need a custom font on mobile devices?  Only include fonts you use  Consider images for rare font use  Can the font size be reduced to only include the characters you need? Only uppercase, etc.

18. Mimic Newsletter Formats  CSS3 can wrap text into multiple columns column-count column-gap column-width  No columns if not supported

19. Columns and Height  How do columns wrap if the containing element has a specified height?  Columns are only created when needed  Text overflows out of the last column (use overlow: hidden to hide overflow content)  Use column-fill: balance to evenly spread content across all columns

20. Column Rules and Breaks  Use column-rule to display a line between columns  Use break-before, break-after, break- inside to prevent column breaks h2 { break-after: avoid }  Use column-span to force an element to span multiple columns

22. What are media queries?  Conditional CSS that depends on device attributes Screen vs. print Display width Pixel ratio (iOS)  Seen in the as media=“print”

23. Target Device Size  Prevent sidebar display if the maximum width of the device is 600px or less @media (max-width: 600px) {.sidebar { display: none; } }

24. Target Device Orientation  Prevent sidebar display if the device is in portrait mode @media (orientation: portrait) {.sidebar { display: none; } }

25. Possible Queries  color (bits per pixel for colors)  aspect-ratio, device-aspect-ratio  device-height, device-width  height, width  orientation  resolution  Upcoming queries: http://dev.w3.org/csswg/mediaqueries4/