{"id":29,"date":"2010-10-08T13:12:20","date_gmt":"2010-10-08T18:12:20","guid":{"rendered":"http:\/\/www.marcblase.com\/blog\/?p=29"},"modified":"2011-06-14T09:51:01","modified_gmt":"2011-06-14T14:51:01","slug":"adding-fonts-to-the-web","status":"publish","type":"post","link":"https:\/\/ma.rcbla.se\/blog\/2010\/10\/adding-fonts-to-the-web\/","title":{"rendered":"Adding fonts to the web"},"content":{"rendered":"<p>Finally, and without javascript do we now have the ability to add <em>our<\/em> fonts to the web using @font-face. It&#8217;s all done with these two declarations in our CSS files:<\/p>\n<p><code>@font-face{<br \/>\n    font-family:'Our-Font-Name';<br \/>\n    src: url('path\/to\/our\/font.otf') format('opentype');<br \/>\n}<\/code><\/p>\n<p><code>p {<br \/>\n    font-family:'Our-Font-Name', georgia, serif;<br \/>\n}<\/code><\/p>\n<p><a href=\"http:\/\/jontangerine.com\/log\/2008\/10\/font-face-in-ie-making-web-fonts-work\" target=\"_blank\">This article<\/a> contains all of the necessary info to make it work via CSS3. The article also includes instructions for some low-level hacking so fonts are also visible in the bane of the internet &#8211; IE.<\/p>\n<p>And you can go ahead and skip the WEFT install and conversion with <a href=\"http:\/\/www.kirsle.net\/wizards\/ttf2eot.cgi\" target=\"_blank\">this handy tool for TTF to EFT conversion.<\/a><\/p>\n<p>UPDATE: To get fonts to really work on the web, in all browsers, on all platforms I&#8217;ve decided to go with <a href=\"http:\/\/typekit.com\/\">TypeKit<\/a>. There is some bandwidth overhead and some minor bloat to your &lt;head&gt; tag but the end result is worth it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Finally, and without javascript do we now have the ability to add our fonts to the web using @font-face. It&#8217;s all done with these two declarations in our CSS files: @font-face{ font-family:&#8217;Our-Font-Name&#8217;; src: url(&#8216;path\/to\/our\/font.otf&#8217;) format(&#8216;opentype&#8217;); } p { font-family:&#8217;Our-Font-Name&#8217;, georgia, serif; } This article contains all of the necessary info to make it work via [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,12,3],"tags":[4,14,15],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-coding","category-css-coding","category-discoveries","tag-css","tag-javascript","tag-typography"],"_links":{"self":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":9,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}