{"id":428,"date":"2011-07-26T10:46:53","date_gmt":"2011-07-26T08:46:53","guid":{"rendered":"http:\/\/blog.netspark.de\/?p=428"},"modified":"2011-07-27T16:26:47","modified_gmt":"2011-07-27T14:26:47","slug":"cufon-and-wordpress","status":"publish","type":"post","link":"https:\/\/blog.netspark.de\/?p=428","title":{"rendered":"Cuf\u00f3n and WordPress&#8230;"},"content":{"rendered":"<p>&#8230;or how you can style your blog and make a specific view available to your people.<br \/>\nOne of the issues of HTML or generally the internet is, that HTML displays the fonts<br \/>\nyou have installed on your computer. So if you use for example Segoe UI (delivered<br \/>\nwith Windows Vista\/Seven, a user with XP or other OS might probably not see your font.<\/p>\n<p><!--more-->The last two days I spent some time to fiddle around with the WP themes and their settings in the php and css-files. I wondered how the theme could give me the Rockwell font type on my computer even though I haven&#8217;t installed it.<\/p>\n<p><span class=\"RockwellFont\" style=\"font-size: 72px;\">Rockwell font type<\/span><\/p>\n<p>Neato, huh? Especially the fact that you can put gradients into your typefaces aswell&#8230; No more hassle with embedding bulky graphics that have a similar effect.<\/p>\n<p>Let&#8217;s look, how far we can take the gradient function&#8230;<\/p>\n<p><span class=\"RockwellFontChrome\" style=\"font-size: 72px;\">Rockwell font type<\/span><\/p>\n<p>It looks as if also Chrome effects are possible&#8230; nice to see&#8230;.<\/p>\n<p>And even my iPhone and Android Tab has displayed it as if it was the most common thing in the world. The only odd thing is that you cannot copy text that has been altered with Cuf\u00f3n.<\/p>\n<p>So I started to analyze the php files that build up my blog and stumbled upon some strange tags that were nested within. Also some weird js-files were nested and when looking into them I found what I was wondering about.<\/p>\n<p>Next thing I did, was to find out more about Cuf\u00f3n and what it does to display custom fonts with no hassle.<\/p>\n<p>As the site shows. you can upload fonts to it and let Cuf\u00f3n convert it to a js file you can use as if it was a ttf file (ttf=TrueType font) and most common on windows boxes.<\/p>\n<p>The next thing was to find a font I like and have it converted to a Cuf\u00f3n font type.<\/p>\n<p>Great stuff if you ask me and rather simple to use if you compare it to other methods of custom font embedding which may not work on all machines aswell. But you have to carefully read what the generator is showing otherwise you may end up with incomplete typefaces or garbled glyphs. So better generate multiple js-files in advance using different settings and find the right choice for you. Also check that your font is complete as some fonts contain for example only Capitals or numbers or are missing the signs like +*\/-%&amp; etc&#8230;<\/p>\n<p>The only thing is, if someone disables javascript on his machine, he might see a quite strange view. So better try to use fonts that look similar to the standard fonts installed on various machines (such as Arial, Times New Roman, Courier etc&#8230;).<\/p>\n<p>I really like the change of the style and day by day it makes more fun to experiment with the theme&#8217;s settings a bit.<\/p>\n<p>So if you should see some changes compared to your last visit, don&#8217;t worry&#8230; I am just experimenting <img src=\"https:\/\/blog.netspark.de\/wp-includes\/images\/smilies\/wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n<p>If you have questions to Cuf\u00f3n and how to use it, visit their website: <a title=\"Cuf\u00f3n Generator\" href=\"http:\/\/cufon.shoqolate.com\/generate\/\" target=\"_blank\">http:\/\/cufon.shoqolate.com\/generate\/<\/a><\/p>\n<p>Have a nice day<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8230;or how you can style your blog and make a specific view available to your people. One of the issues of HTML or generally the internet is, that HTML displays the fonts you have installed on your computer. So if you use for example Segoe UI (delivered with Windows Vista\/Seven, a user with XP or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[55,6,3],"tags":[321,323,326,322,324,325,91,90],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-computer-2","category-ideas","category-news","tag-cufon","tag-design","tag-experimenting","tag-font","tag-javascript","tag-php","tag-web","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.netspark.de\/index.php?rest_route=\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.netspark.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.netspark.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.netspark.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.netspark.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=428"}],"version-history":[{"count":0,"href":"https:\/\/blog.netspark.de\/index.php?rest_route=\/wp\/v2\/posts\/428\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.netspark.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.netspark.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.netspark.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}