Neal Stublen

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

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

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’)

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

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 problemshttp:// problems

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

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

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

Adding a Font  Let’s add fonts to the HTML Herald page  Add fonts

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

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

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

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.

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

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

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

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”

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

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

Possible Queries  color (bits per pixel for colors)  aspect-ratio, device-aspect-ratio  device-height, device-width  height, width  orientation  resolution  Upcoming queries: