An ongoing tutorial series for those who already have a basic understanding of making tumblr themes
An ongoing tutorial series for those who already have a basic understanding of making tumblr themes and hopefully find something new or different to try. A while back I said I was going to post a tutorial on how to use custom fonts on tumblr. And what better time than now, after that latest update from Chrome is messing up font rendering. Difficulty: CSS (easy) | HTML | JSExtra Reading: @font-face rule, base64 encode, fallback fonts What’s Not Working First off, I’ve seen many people use @font-face with only one format. This is technically incorrect as it’s incomplete and it’ll only work on browsers that support that specific font format or those who already have the font installed on that computer. So this, is technically incomplete: @font-face { font-family: 'fontname'; src: url("http://static.tumblr.com/whx9ghv/fontname.ttf") format('truetype'); } If you really, really only want to use one format, the safest option is to use .woff as that is supported by all the modern browsers. The agreed method with the best cross-browser compatibility should be something like this (there’s a good tutorial over at lmthemes): @font-face { font-family: 'fontfamily'; src: url('"http://static.tumblr.com/whx9ghv/fontname.eot'); src: url('http://static.tumblr.com/whx9ghv/fontname.eot?#iefix') format('embedded-opentype'), url('http://static.tumblr.com/whx9ghv/fontname.woff') format('woff'), url('http://static.tumblr.com/whx9ghv/fontname.ttf') format('truetype'), url('http://static.tumblr.com/whx9ghv/fontnamey.svg#svgfontfamily') format('svg'); font-weight: normal; font-style: normal; } However, there are at least two known instances when this doesn’t work. 1. In Firefox. To use custom fonts in Firefox, they are required to be served from the same domain - which is impossible on tumblr. 2. After the latest Chrome update and it’s font rendering problem. And Here’s The Fix Use a base64 encoding of the font and add it to the @font-face declaration, to embed it directly into the CSS. There are a range of places that can do this, my favourites are: Font Squirrel’s Web Generator and Opinionated Geek’s Encode Tool. Font Squirrel’s Web Generator On the page, select Expert Option, scroll down to the CSS part and tick “Base64 Encode” - that will then generate a download with all the prewritten CSS needed. Please note that it won’t work right away if you’re using this method. I’m not entirely sure why but there are small tweaks that need to be made to the CSS (if you refer to the code below). Opinionated Geek’s Encode Tool This is what I prefer to use. This tool will only give you the encode (the really long part) but if you have the code below it’s easy to just paste it in the right place. The CSS You Need @font-face { font-family: 'fontface'; src: url('http://linktofontface.eot'); } @font-face { font-family: 'fontface'; src: url(data:font/ttf;base64,[insert-encode-here]) format('truetype'); font-weight: normal; font-style: normal; } Things That Need to be Edited: ‘fontface’ - the name of the font ttf - the format of the font that you encoded truetype - the format of the font you encoded [insert-encode-here] - this is where the encode goes, minus the squaure brackets Here is a working exampleHere is an example where you can compare before and after of using this technique. As you can see, the encode part is super, duper extra long. It makes scrolling through the code really tedious. So what I suggest is to link to it as a separate stylesheet to save you space. Few things to note when using custom fonts. Don’t overload it. As we’re directly embedding into the CSS, load up time will be effected. I seriously wouldn’t consider using more than one custom font with this method. Use Google Fonts where you can. Also, make sure you always have fallback fonts - which you should anyway - for when things go wrong. -- source link
#tutorial