{"id":625,"date":"2015-01-29T16:20:05","date_gmt":"2015-01-29T16:20:05","guid":{"rendered":"http:\/\/art556.com\/?page_id=625"},"modified":"2015-01-29T16:20:05","modified_gmt":"2015-01-29T16:20:05","slug":"installing-web-fonts","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/resources\/installing-web-fonts\/","title":{"rendered":"Installing web fonts"},"content":{"rendered":"<div style=\"color: #000000;\">Because a clients identity will typically be seen in both print and web, you will want to make sure that their corporate fonts are available in both formats.<\/div>\n<div style=\"color: #000000;\">\n<ul>\n<li>A desktop font typically has one of the following extension: .ttf, .otf, .t1, .tt (see teal circle below)<\/li>\n<li>Older fonts came in four formats to accommodate different browsers: .eot, .svg, .ttf and .woff. (See pink circle below) Some newer fonts may jst have a .woff font in the kit. \u00a0The stylesheet.css supplied in the webfont kit is helpful.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/art556.com\/wp-content\/uploads\/2017\/09\/webfonts.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-957\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2017\/09\/webfonts-282x300.jpg\" alt=\"\" width=\"282\" height=\"300\" \/><\/a><\/p>\n<ol>\n<li><strong>Download the webfont kit.<\/strong><\/li>\n<li><strong>Find the font files in the webfont kit.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-628 size-medium\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2015\/01\/web_fonts-278x300.jpg\" alt=\"web_fonts\" width=\"278\" height=\"300\" \/><\/strong><\/li>\n<li><strong><strong>Put the font files, ending in .eot, .svg, .ttf and .woff in the root directory.<\/strong>\u00a0<\/strong>In this case, put them in the unit_1 folder.<strong>\u00a0<\/strong>If you put them in a folder, they will not be found.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-626\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2015\/01\/fontFiles-127x300.jpg\" alt=\"fontFiles\" width=\"127\" height=\"300\" \/><\/li>\n<li><strong> Find the .css code for your font in the webkit.<\/strong> Open the .css file in Dreamweaver so you can copy \u00a0the code.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-627\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2015\/01\/web_font_css-278x300.jpg\" alt=\"web_font_css\" width=\"278\" height=\"300\" \/><\/li>\n<li><strong><strong>Paste the css code into your .css style sheet. <\/strong><\/strong>The code may look like this:<strong><strong><br \/>\n<\/strong><\/strong>@font-face {<br \/>\nfont-family: &#8216;1942_report1942_report&#8217;;<br \/>\nsrc: url(&#8216;1942-webfont.eot&#8217;);<br \/>\nsrc: url(&#8216;1942-webfont.eot?#iefix&#8217;) format(&#8217;embedded-opentype&#8217;),<br \/>\nurl(&#8216;1942-webfont.woff&#8217;) format(&#8216;woff&#8217;),<br \/>\nurl(&#8216;1942-webfont.ttf&#8217;) format(&#8216;truetype&#8217;),<br \/>\nurl(&#8216;1942-webfont.svg#1942_report1942_report&#8217;) format(&#8216;svg&#8217;);<br \/>\nfont-weight: normal;<br \/>\nfont-style: normal;<br \/>\n}<a href=\"http:\/\/art556.com\/wp-content\/uploads\/2015\/01\/css.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-629\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2015\/01\/css-210x300.jpg\" alt=\"css\" width=\"210\" height=\"300\" \/><\/a><\/li>\n<li>From the css, copy the font name (&#8216;1942_report1942_report&#8217;) and use it for your font-family like this:<br \/>\nh1 {<br \/>\n<strong>font-family: &#8216;1942_report1942_report&#8217;;<\/strong><br \/>\nfont-size: 72px;<br \/>\nline-height:72px;<br \/>\ntext-align: left;<br \/>\ncolor: #333333;<br \/>\nletter-spacing: 0.2px;<br \/>\n}<\/li>\n<li><strong>Remember to view &#8220;live&#8221; while in Dreamweaver.\u00a0<\/strong><\/li>\n<li><strong>Remember to send the font files (.eot, .svg, .ttf and .woff) and your new .css file to the server.<\/strong><\/li>\n<\/ol>\n<\/div>\n<div style=\"color: #000000;\"><\/div>\n<div style=\"color: #000000;\">Here is a\u00a0much more complicated explanation:<\/div>\n<div style=\"color: #000000;\"><\/div>\n<div style=\"color: #000000;\"><a href=\"http:\/\/www.fontsquirrel.com\/help\">http:\/\/www.fontsquirrel.com\/help<\/a><\/div>\n<div style=\"color: #000000;\"><\/div>\n<div style=\"color: #000000;\"><\/div>\n<div style=\"color: #000000;\">If the font you want is not available in a webfont kit, you can try the following webfont generator or pick a different font.<\/div>\n<div style=\"color: #000000;\"><\/div>\n<div style=\"color: #000000;\"><a href=\"http:\/\/www.fontsquirrel.com\/tools\/webfont-generator\">http:\/\/www.fontsquirrel.com\/tools\/webfont-generator<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Because a clients identity will typically be seen in both print and web, you will want to make sure that their corporate fonts are available in both formats. A desktop font typically has one of the following extension: .ttf, .otf, .t1, .tt (see teal circle below) Older fonts came in four formats to accommodate different [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":40,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-625","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/625\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/40"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}