{"id":372,"date":"2012-09-07T11:17:48","date_gmt":"2012-09-07T11:17:48","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=372"},"modified":"2016-03-03T18:25:49","modified_gmt":"2016-03-03T18:25:49","slug":"06-web-fonts","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/06-web-fonts\/","title":{"rendered":"06  CSS3 Web Fonts"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"http:\/\/fast.fonts.com\/jsapi\/d2fe01a3-0828-4419-b594-3a5a716ca65f.js\"><\/script>\n<link href='http:\/\/fonts.googleapis.com\/css?family=Cabin+Sketch:700|Didact+Gothic|Luckiest+Guy&#038;v2' rel='stylesheet' type='text\/css'\/>\n<script type=\"text\/javascript\" src=\"http:\/\/use.typekit.com\/tuw3zjt.js\"><\/script><br \/>\n<script type=\"text\/javascript\">try{Typekit.load();}catch(e){}<\/script><\/p>\n<p>Fonts went from a handful to thousands seemingly overnight back in 2010. That was made possible by the introduction of <a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-face-rule\">@font-face<\/a> in CSS3.<\/p>\n<h2>Embedded Web Fonts<\/h2>\n<\/p>\n<p>The @font-face is a means to of linking to fonts on your server much like you would link to any other resource. The <a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-resources\">@font-face<\/a> rule was actually part of CSS version 2.0 back in 1998, but it was dropped in CSS2.1, and is now back in CSS3, and as every browser supports them; its caught on like wildfire.\n<\/p>\n<p style=\"padding-bottom: 30px;\">The real stumbling block was not the technology, but the licensing of fonts. Downloading an embedded font downloads the actual artwork itself, and font foundries were not about to give away their intellectual property. This was not a problem as long as fonts were served by the operating system that took care of the licensing.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#linotype h2 {\r\nfont-family:'Schmutz W02 Clogged';\r\nfont-size: 4em;\r\nline-height: 1em;\r\n}\r\n#linotype p {\r\nfont-family:'Century Gothic W01';\r\nfont-size: 1em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"linotype\">\n<h2> Time&#8217;s Up!<\/h2>\n<p>The time had come for the type foundries to figure a way out of the legal quagmire, for they were faced  with the immanent release of CSS3 and @font-face, which would have opened up the floodgates to competing royalty free font services like <a href=\"http:\/\/www.google.com\/webfonts\">Google Web Fonts<\/a>. They, of course, found a way. <\/p>\n<h2>Just&#8217;n Time!<\/h2>\n<\/p>\n<p>The most common manner in which type foundries control access to their font faces is by serving the fonts themselves. They do this in a number of ways. Linotype, the largest type foundry representing many thousands of fonts, runs <a href=\"http:\/\/webfonts.fonts.com\/en-US\">fonts.com<\/a>, a clearing house for a number of foundries. <\/p>\n<h2>The Good News<\/h2>\n<\/p>\n<p>Thousands of their fonts are free to use below a certain threshold (25,000 hits per month). Once you set up an account, you create a project and can then select from many of their fonts, designating a selector that will link up the fonts to your document though a line of code that you put into your header. You can see the use of Smuts Clogged. They provide you with a line of code that you put into the header of your document. All that remains to be done is to create elements with an attribute that match the designated selectors, and their server takes care of the rest, in this case, Smutz Clogged for the header type and Century Gothic for the paragraph.\n<\/p>\n<p>Another benefit is that these fonts are served up fast. After purging my cache in Safari, this page has 1020.61kb worth of fonts (compare that to 25.25kb for the document, 760.15kb for the stylesheets, 884b for the images and 375.62kb for the scripts, for a total page size of a 2.131mb) and yet the fonts took 1.93 seconds to load (compared that with 950ms for the document, 3.04s for the stylesheets. 1.85s for the images and 1.03s for the scripts, for a total of 4.82 seconds). As most of the CSS came from typekit.com, it may have contained a font as a stylesheet, but that speed is still impressive enough to not worry about the overhead of using interesting fonts.<\/p>\n<h2> The Bad News<\/h2>\n<\/p>\n<p style=\"padding-bottom: 30px;\">The bad news really isn&#8217;t so bad. They place a fonts.com button on the side of your page. If you can live with that, you have world class fonts at your fingertips.\n<\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#googleType h2 {\r\nfont-family: 'Cabin Sketch', cursive;\r\n\/*font-family: 'Luckiest Guy', cursive;*\/\r\nfont-size: 4em;\r\nfont-size: 4em;\r\nline-height: 1em;\r\n}\r\n#googleType p {\r\nfont-family: 'Didact Gothic', sans-serif;\r\nfont-size: 1em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"googleType\">\n<h2> Google Fonts<\/h2>\n<p>And then there is  <a href=\"http:\/\/www.google.com\/webfonts\">Google Web Fonts<\/a>. There are only a few hundred fonts, not thousands, but that may get you close enough, and there is no button to put up with.\n<\/p>\n<p>The library is growing very quickly, so expect that  it will be a very robust source of web fonts in a few years. Google has created a very nice interface to try out your fonts and to style them, and it even lets you compile them into projects and you can <a href=\"http:\/\/www.google.com\/webfonts#UsePlace:use\/Collection:Cabin+Sketch:700|Didact+Gothic|Luckiest+Guy\">bookmark<\/a> them for later reference.\n<\/p>\n<p>Wouldn&#8217;t you know it, but they even have a handy <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/engndlnldodigdjamndkplafgmkkencc\">font previewer plugin<\/a> for Chrome that lets you preview what a web page would look like in any one of their fonts, and generate the required code on the fly, so you can easily drop one of their fonts into your project.\n<\/p>\n<\/div>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#EdgeType h2 {\r\nfont-family: alex-brush, cursive;\r\nfont-size: 4em;\r\nline-height: 1em;\r\n}\r\n#EdgeType p {\r\nfont-family: advent-pro, sans-serif;\r\nfont-size: 1em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"EdgeType\">\n<h2> Adobe Edge Fonts<\/h2>\n<p><script src=\"\/\/use.edgefonts.net\/alex-brush:n4;advent-pro.js\"><\/script><\/p>\n<p><a href=\"https:\/\/edgewebfonts.adobe.com\/fonts\">Adobe Edge Fonts<\/a> is a <a href=\"http:\/\/www.edgefonts.com\/\">free font service<\/a> that provides access to a large library of fonts for your web site. Check out the useful <a href=\"http:\/\/edgefonts.toekneestuck.com\">Adobe Edge Previewer<\/a>.\n<\/p>\n<p>To use these fonts, add a JavaScript tag to the <head> of your page, then reference a font-family in your stylesheet. There are currently about 500 font families to <a href=\"http:\/\/www.edgefonts.com\/#list-of-available-fonts\">choose from<\/a>. More if you pay. <\/p>\n<p>The only downside is that Edge Fonts use Javascript, and nothing shows up when that&#8217;s turned off. Google fonts use CSS. CSS can also be turned off, but that is more rare, and you&#8217;d lose all styling. <\/p>\n<h2>Choice<\/h2>\n<\/p>\n<p>There are other type foundries, such as TypeKit, which really pioneered the approach that commercial foundries now use, like Linotype above. They have since been  bought up by Adobe. You have access to many of their fonts if you subscribe to the Adobe Cloud. For an additional subscription, you gain more fonts and more page views.  <\/p>\n<h2>Too Few Fonts?<\/h2>\n<\/p>\n<p>Some fonts come in many styles. This is an example of the eight different styles: <span style=\"font-weight: 300;\">light and <\/span><span style=\"font-weight: 300; font-style: italic;\">light italic<\/span>, <span style=\"font-weight: 400;\">regular and <\/span><span style=\"font-weight: 400; font-style: italic;\">regular italic<\/span>, <span style=\"font-weight: 500;\">medium and <\/span><span style=\"font-weight: 500; font-style: italic;\">medium italic<\/span>, <span style=\"font-weight: 700;\">bold and <\/span><span style=\"font-weight: 700; font-style: italic;\">bold italic<\/span>.\n<\/p>\n<p><\/head><\/p>\n<\/div>\n<div id=\"fontsquirrel\">\n<h2>@font-face<\/h2>\n<p>Using @font-face requires two steps.\n<\/p>\n<p>The first step shows the @font-face rules that connect the style sheet to the resources for three fonts. This is done in the same way that an image is linked. Download the font resource, put them in a folder, and link to them as demonstrated, using the @font property.  Use <code>font-family<\/code> to determine the font name, which you will recall when you apply the font in the second step.\n<\/p>\n<p>The second CSS Code View applies these fonts using <code>font-family<\/code>.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\" style=\"font-size: 70%;\">\r\n@font-face {\r\nfont-family: 'intro_head_rbase';\r\nsrc: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/fonts\/introheadr-base-webfont.ttf');\r\n}\r\n@font-face {\r\nfont-family: 'intro_rust_gbase_2_line';\r\nsrc: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/fonts\/introrustg-base2line-webfont.ttf');\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#fontsquirrel h2 {\r\nfont-family: 'intro_rust_gbase_2_line',sans-serif;\r\nfont-size: 4em;\r\nline-height: 1em;\r\n}\r\n#fontsquirrel p {\r\nfont-family: 'intro_head_rbase',sans-serif;\r\nfont-weight: 400;\r\n\/*400, 700*\/\r\nfont-size: 1em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<h2>DIY @Font-Face<\/h2>\n<\/p>\n<p><a href=\"http:\/\/www.fontsquirrel.com\/\">FontSquirrel<\/a> provides the actual font resources so you can serve the fonts yourself using the @font-face. Instead of subscribing and letting the foundry serve your fonts, you download the fonts and make them available just as you would any other resource, like an image, for example. It comes as a package with font resources, a CSS style sheet and an example HTML file, so its easy to use and is pretty self explanatory.<\/p>\n<h2>Font Generator<\/h2>\n<\/p>\n<p>FontSquirrel provides an online <a href=\"http:\/\/www.fontsquirrel.com\/fontface\/generator\">font generator<\/a> as well, allowing you to turn your own hand-crafted fonts into the different web formats. This is a very powerful tool, just make sure that you obay all of the licensing issues so that you don&#8217;t step on anyone&#8217;s toes. This means that you could turn <a href=\"http:\/\/www.smeltery.net\/fonts\/geronto-bis\">non-web fonts<\/a> into web fonts as long as they provide a license for you to do so.<\/p>\n<h2>Other Foundries<\/h2>\n<\/p>\n<p>There are other type foundries offering fonts for free and for a price, usually a yearly subscription fee, and I am sure that the number of fonts will grow: <a href=\"http:\/\/www.fontspring.com\/\">FontSpring, <\/a><a href=\"http:\/\/www.exljbris.com\/\">Exljbris, <\/a><a href=\"http:\/\/www.typotheque.com\/webfonts\/\">Typotheque, <\/a><a href=\"http:\/\/www.fontshop.com\/fontlist\/n\/web_fontfonts\/\">Font Shop, <\/a><a href=\"http:\/\/webfonts.info\">Webfonts.info<\/a>.\n<\/p>\n<p>What an embarrassment of riches after the starvation diet we lived on for so many years. Enjoy! The web is just waking up to this possibility, and its your for the taking. Visit <a href=\"http:\/\/fontsinuse.com\/\">Fonts in Use<\/a> if you need more inspiration.\n<\/p>\n<\/div>\n<h2>CSS Font Properties<\/h2>\n<p><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-properties\">Font Properties<\/a> determine what the letterform of the character looks like. There are a number font properties that can be used individually (and many more waiting to be implemented by the browsers):  <code>font-style; font-variant; font-weight; font-size; line-height; font-family<\/code>. <\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#properties p {\r\nfont-style: italic; \r\n\/*normal, italic, oblique*\/\r\nfont-variant: small-caps; \r\n\/*normal, small-caps*\/\r\nfont-weight: 700; \r\n\/*normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900*\/\r\nfont-size: 1em; \r\n\/*absolute-size, relative-size, length, percentage*\/\r\nline-height: .9em; \r\n\/*absolute value, relative value*\/\r\nfont-family: \"Times New Roman\",Georgia,Serif;\r\n\/*notice that quotes are used when spaces are involved in the font name.*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"properties\" style=\"margin: 20px 0;\">\n<p>These values are assigned by multiple individual properties.\n<\/p>\n<\/div>\n<p>The <a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#shorthand-font-property-the-font-propert\">shorthand<\/a> remains most popular <code>font: <\/code>, after which come values for the following properties in this exact order:  <code>font-style; font-variant; font-weight; font-size; line-height; font-family<\/code>.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#shorthand p {\r\nfont: italic small-caps 700 1em\/.9em  \"Times New Roman\",Georgia,Serif;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"shorthand\"  style=\"margin: 20px 0;\">\n<p>These values are assigned by a single font shorthand property.\n<\/p>\n<\/div>\n<p>You add the values together with spaces, except for the font size\/line height which has a slash, and the font-family, which separates the fonts with commas.\n<\/p>\n<p>The line-height is to be specified along with the font size with a slash between, as in 1em\/120%. Then comes the font family, which goes from the primary font to a backup font should the primary font be missing, to a generic serif or san-serif font if all else fails. Fonts with names of more than one word, like &#8216;Times New Roman&#8217; require single or double quotations marks.\n<\/p>\n<p>There are a number of peculiar conventions you have to observe: The family name has to come last, right before the size, and if you include the line height, you need to do that as shown, with a forward slash. Another anomaly is when you use a unit after the line height, it is a fixed value for inherited values. If you use no unit after the line height, the value is multiplied, and goes up and down with the size of the font in the children.<\/p>\n<h2>Complications when Sizing Fonts<\/h2>\n<\/p>\n<p>The absolute way to set the size of a font is to set it in a fixed measurement, like pixels. Relative sizing of fonts is preferred, however, because of the flexibility in changing font sizes, and once upon a time, the ability to change the layout size, when the text and layout were not yet treated as one. Here is a demonstration where this flexible layout measurement based on the em runs into problems. <\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#emsize div {\r\nfont-size: 2rem;\r\noutline: 1px solid #aaa;\r\nwidth: 400px;\r\nbackground: #ccc;\r\npadding: .3em;\r\n}\r\n#emsize>div>div{\r\nfont-size:.8em;\r\noutline: 1px solid #aaa;\r\nwidth: 80%;\r\nbackground: #ddd;\r\npadding: .3em;\r\n}\r\n#emsize>div>div>div{\r\nfont-size: 80%;\r\noutline: 1px solid #aaa;\r\nwidth: 80%;\r\nbackground: #eee;\r\npadding: .3em;\r\n}\r\n#emsize>div>div>div>div{\r\nfont-size: .8em;\r\noutline: 1px solid #aaa;\r\nwidth: 80%;\r\nbackground: #fff;\r\npadding: .3em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"emsize\" style=\"margin: 20px 0;\">\n<div>A: parent of B.<\/p>\n<div>B: parent of C\/child of A.<\/p>\n<div>C: parent of D\/child of B.<\/p>\n<div>D: Child of C.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>These are four nested divs, with the text in each child being sized by 80%, or .8em, which is the same thing. Notice that this is cumulative, and that can cause problems keeping track of the font size when creating complicated layouts with multiple nested elements. Ideally you have a well defined hierarchy, where all the fonts are related in size, and this feature creates problems. What to do?\n<\/p>\n<p>Recognizing this problem, CSS3 released the REM, a master flexible width, so to speak. Rem stand for root em, meaning a relative type unit that keeps its size based on the size defined for the root. Where the em unit is relative to its parent, meaning the type and the other elements kept getting smaller, the rem unit is relative to the root element, and keeps the same proportion, as demonstrated below.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#remsize div {\r\nfont-size: 2em;\r\noutline: 1px solid #aaa;\r\nwidth: 300px;\r\nbackground: #ccc;\r\npadding: .3rem;\r\n}\r\n#remsize>div>div{\r\nfont-size: .8rem;\r\noutline: 1px solid #aaa;\r\nwidth: 80%;\r\nbackground: #ddd;\r\npadding: .3rem;\r\n}\r\n#remsize>div>div>div{\r\nfont-size: .8rem;\r\noutline: 1px solid #aaa;\r\nwidth: 80%;\r\nbackground: #eee;\r\npadding: .3rem;\r\n}\r\n#remsize>div>div>div>div{\r\nfont-size: .8rem;\r\noutline: 1px solid #aaa;\r\nwidth: 80%;\r\nbackground: #fff;\r\npadding: .3rem;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"remsize\" style=\"margin: 20px 0;\">\n<div>A: parent of B.<\/p>\n<div>B: parent of C\/child of A.<\/p>\n<div>C: parent of D\/child of B.<\/p>\n<div>D: Child of C.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Fonts went from a handful to thousands seemingly overnight back in 2010. That was made possible by the introduction of @font-face in CSS3. Embedded Web Fonts The @font-face is a means to of linking to fonts on your server much &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/06-web-fonts\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/372"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":26,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":3263,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/372\/revisions\/3263"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}