Add RTL Support and Web Fonts to Tumblr Posts
04 May 2013 
This is my technical blog. My personal blog, where I write mostly in my native Arabic, is hosted on Tumblr which is a nice platform but is really bad in supporting Arabic and other RTL languages. At least that’s my experience.
So finally I got sick of it and decided that I’m gonna fix this with some HTML and CSS magic. Maybe with some help. I did find that Tumblr has some nice features that helps fixing the problem. Let’s see how.
Tumblr lets you modify the HTML and insert additional CSS to your page. You gotta be careful when you’re doing this. At least make a backup of your page before you try new changes.
One nice feature is that you can add {TagsAsClasses} as a CSS class. This will allow Tumblr to read the tags you attach to your post and apply them as a CSS class. I’ll use this as a way of marking the Arabic posts that I’d like to display from Right-to-Left. For every one of these posts, I’ll add the tag “arabic” and then Tumblr will apply the CSS class to that post.
I’ve used a simple theme named Quite Big as my base theme. You’ll find a DIV with the classes “content” and “x-post”. x-post is not the name of a class but rather text-post, photo-post, quote-post, and link-post. One class for each type of post.
You’ll need to find each one of these DIVs and add “{TagsAsClasses}” to its CSS classes.
Wait, where can I get the HTML?
In the Settings section, click on the item at the bottom of the list on the left where you should see your avatar. Next to “Theme”, click “Customize”. On the left, you’ll find “Edit HTML”.
After you save the modified HTML. While in the “Customize” mode, scroll down to the bottom in the pane on the left. You’ll find a “Add Custom CSS” section. This is where we’ll add a definition of how we want to display the Arabic posts.
{TagsAsClasses} allows us to add a tag to any post and apply it as a CSS class. The name of the CSS class must match the name of the tag. In my case, I chose “arabic”. Here’s the CSS I used.
This will apply the RTL direction, it will align the text to the right, and make the font size a little bit bigger.
How to Use Web Fonts?
Now that I went through the posts and added the “arabic” tag and everything is right to left. I need a good font to really make the blog look beautiful. Nothing pleases me when I’m writing Arabic like the Amiri font. Since it’s available on Google Web Fonts, this makes my task much easier.
First, I import Amiri.css. I go back to the HTML of my pages. Before the very end of the <style> element in the <head> (search for </style> and place the next line right before it):
Then I got back to the additional CSS, and slightly modify the CSS to look like this:
What about the Headers?
I notice the headers need a little bit of a change. They don’t have the right font. So, I go back to the HTML, and find the H3 element for the titles, and change it to look like this:
Then modify the CSS to look like this:
Now, the headers and the body are using Amiri and the header has the right size.
I’ve published the modified HTML file on a GitHub gist if you want to use the same theme. Here is the additional CSS.