{"id":2007,"date":"2009-10-12T09:01:08","date_gmt":"2009-10-12T08:01:08","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=143"},"modified":"2009-10-12T09:01:08","modified_gmt":"2009-10-12T08:01:08","slug":"using-the-purisa-light-font-on-a-website","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2009\/10\/using-the-purisa-light-font-on-a-website\/","title":{"rendered":"Using the Purisa Light font on a Website"},"content":{"rendered":"<p>If you want to use the <span class='sloganFont'>&#8220;Purisa Light&#8221;<\/span> font on your Linux hosted website, you can follow the following steps:<\/p>\n<ol>\n<li>Copy the font file from your desktop machine to your webserver. On Ubuntu the &#8220;Purisa Light&#8221; font file is located at <em>\/usr\/share\/fonts\/truetype\/thai\/Purisa.ttf<\/em>. e.g:<br \/>\n<span class=\"iconTerminal\">scp \/usr\/share\/fonts\/truetype\/thai\/Purisa.ttf &lt;username&gt;@&lt;webhost&gt;:\/&lt;pathToWebsite&gt;\/fonts\/Purisa.ttf<\/span><\/li>\n<li>Add the font face to your stylesheet:\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@font-face {\n    font-family: 'Purisa';\n    src: url('fonts\/Purisa.eot'); \/* For IE *\/\n    src: local('Purisa'),\n         url('fonts\/Purisa.ttf') format('truetype');\n}\n<\/pre>\n<\/li>\n<li>Now you should be able to use it in your site pages. e.g.\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div style=&quot;font-family:Purisa,arial&quot;&gt;\nThis should be in the &quot;Purisa Light&quot; font...\n&lt;\/div&gt;\n<\/pre>\n<ul>\n<li>\n<div style=\"font-family:Purisa,arial\">This paragraph should be in the &#8220;Purisa Light&#8221; font. You can <a href=\"ftp:\/\/linux.thai.net\/pub\/thailinux\/software\/thai-ttf\/\">download thai-ttf-0.4.3.tar.gz for free<\/a> from the Thai Linux Working Group (TLWG).<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li>BUT, we&#8217;re not done yet because unfortunately, IE does not support TrueType (ttf) fonts &#8211; only Embedded Open Type (eot) fonts.<\/li>\n<li>Download <strong>ttf2eot<\/strong> from <a href=\"http:\/\/code.google.com\/p\/ttf2eot\/\">http:\/\/code.google.com\/p\/ttf2eot\/<\/a> &#8211; it is a open-source font format converter.<\/li>\n<li>Extract it to your home directory. Then build it:\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\ncd ~\/ttf2eot-0.0.2-2\nsudo apt-get install build-essential\nmake\n<\/pre>\n<\/li>\n<li>Convert the font:<br \/>\n<span class=\"iconTerminal\">.\/ttf2eot &lt; \/usr\/share\/fonts\/truetype\/thai\/Purisa.ttf &gt; Purisa.eot<\/span><\/li>\n<li>Copy it to your website, e.g<br \/>\n<span class=\"iconTerminal\">scp \/usr\/share\/fonts\/truetype\/thai\/Purisa.eot &lt;username&gt;@&lt;webhost&gt;:\/&lt;pathToWebsite&gt;\/fonts\/Purisa.eot<\/span><\/li>\n<li>Now it should work on IE. If you don&#8217;t have time to convert this font, you can grab mine &#8211; use &#8220;view source&#8221; to find the URL from the stylesheet.<\/li>\n<\/ol>\n<p><code>@font-face<\/code> is a HTML5 feature supported by Safari 3.1+, Firefox 3.5+, Opera 10+ and IE 4+. At the time of writing Google Chrome currently doesn&#8217;t support <code>@font-face<\/code> (but the beta version does so it won&#8217;t be long).<\/p>\n<p>This post was inspired from an excellent article called <a href=\"http:\/\/www.useragentman.com\/blog\/2009\/09\/20\/font-face-in-depth\/\">@font-face in Depth<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to use the &#8220;Purisa Light&#8221; font on your Linux hosted website, you can follow the following steps: Copy the font file from your desktop machine to your webserver. On Ubuntu the &#8220;Purisa Light&#8221; font file is located at \/usr\/share\/fonts\/truetype\/thai\/Purisa.ttf. e.g: scp \/usr\/share\/fonts\/truetype\/thai\/Purisa.ttf &lt;username&gt;@&lt;webhost&gt;:\/&lt;pathToWebsite&gt;\/fonts\/Purisa.ttf Add the font face to your stylesheet: @font-face { [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[82],"tags":[77,26,84],"class_list":["post-2007","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-fonts","tag-ubuntu","tag-webdesign"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2007"}],"version-history":[{"count":0,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2007\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}