Customizing fonts in Blogger mobile view

Here's a way of editing the font and text styles on your Blogger blog's mobile view. This will be useful if your blog's mobile view is showing a generic font instead of the customized fonts you chose for the desktop view.

Note: this post applies only to Blogger themes like Awesome Inc, Simple, Watermark, Etc. This does not apply to the four new Blogger themes (Emporio, Soho, Notable, Contempo), which have no separate templates for desktop/mobile.

Blogspot mobile view. Default-reverting template (L) and my corrected template (R)

To make it work and get those pretty fonts on the mobile view, we just need to do two things:

Add a few lines of code to the template to load the fonts we are using
Add a few lines of CSS to display them in the mobile view

Before I get into that, let me show you an example of what I mean. You can scroll down to Section B if you want to jump right into the code.

Section A - Example of a blog not displaying the right fonts in mobile view

Example blog nicely customized in the desktop editor

Let's look at an example. Here's a test blog I made using one of the "Awesome Inc" default templates. In the template editor (Template → Customize), I chose a variety of interesting and neat-looking fonts automatically provided in Blogger's drop-down lists.

Even though Blogger's default templates' styles are a bit out of date, they can be made to look modern and smooth mostly just by using better fonts at larger sizes. Anyway, here's what I came up with.

Desktop view, utilizing a variety of fonts

I wanted a variety, so I'm using these fonts in that blog:

Post titles font = Kenia
Date header font = Syncopate
Blog title font = Cherry Cream Soda
Blog description font = Chewy
Overall Page font = Fontdiner Swanky

OK, looks good there on desktop view. But what happens when I check out the mobile view -- even when the mobile template selector is set at "Custom" as it should be? It doesn't show the right fonts.

Example failure to apply customized fonts to the mobile template

The mobile view ends up looking like this:

The variety of fonts all revert to generic fonts in the mobile view

You can see that all the customized fonts are gone.

The problem is that sometimes if you opt to use the nicer non-standard fonts on your blog, you'll notice that the desktop view of your blog looks great, but on a phone or other mobile device, those cool beautiful fonts don't show up. Instead, a generic font is used like above. This seems to happen to any text style that uses a font other than the standards:

Arial
Courier
Georgia
Impact
Times New Roman
Trebuchet
Verdana

These essential fonts are easily and automatically recognized by a mobile browser, but our special fonts (Chewy, Cherry Cream Soda, Kenia, etc.) are not. So we need to do those two things I mentioned at the beginning to get them working on mobile: we need to specify in the template the loading of these fonts, and we need to instruct them to be displayed via CSS. So let's jump into Section B.

Section B - Changing the template code to make the fonts show in the mobile view

1st - Add the fonts you are using to the blog template

First you need to make a list of which fonts you are actually using in your template. Again, ignore any of the basic ones listed above. Just make note of the special Google fonts you chose from the drop-down menus (in Template → Customize → Advanced).

For my example above, I was using Kenia, Syncopate, Cherry Cream Soda, Chewy, and Fontdiner Swanky.

For each of those, I need to enter a single line of code in my template (Template → Edit HTML). Look for this line near the top:

<b:include data='blog' name='all-head-content'/>

Just above it, we will place the lines for each font. The line looks like this, with FONTNAME replaced by your font:

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'/>

So for my example blog, I added this code:

<link href='http://fonts.googleapis.com/css?family=Kenia' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Cherry Cream Soda' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Fontdiner Swanky' rel='stylesheet' type='text/css'/>

2nd - Add the CSS code to display these fonts in the mobile template

Now we need to add our CSS to edit each section. This part can be annoying, since we need to do it manually for each part. For example, if you chose a special font for the blog title, we need to add a code entry for that -- one entry for each section we customized. Don't worry, just copy and paste from my example.

Here's a cheat-sheet of common sections you likely will want to use:

Post titles in the individual posts mobile view = .mobile h3.post-title
Posts titles in the list of posts = .mobile-index-title
Blog description in mobile = .mobile .Header .description
Blog title in individual posts view = .mobile .Header h1 a
Blog Title mobile view list page only = .mobile .Header h1.title
Post content text in mobile view = .mobile .post-body
Date stamp in mobile view = .mobile .date-header

Based on my example above then, I will add the following code to my blog template's CSS (Template → Customize → Advanced → Add CSS)

/* Post titles in the individual posts mobile view */ .mobile h3.post-title { font: normal 20px Kenia; } /* Posts titles in the list of posts */ .mobile-index-title { font: normal 20px Kenia; } /* Blog description in mobile */ .mobile .Header .description { font: normal 16px Chewy; } /* Blog title in individual posts view */ .mobile .Header h1 a { font: normal 22px "Cherry Cream Soda"; } /* Blog Title mobile view list page only */ .mobile .Header h1.title { font: normal 22px "Cherry Cream Soda"; } /* Post content text in mobile view */ .mobile .post-body { font: normal 12px "Fortdiner Swanky"; } /* Date stamp in mobile view */ .mobile .date-header { font: normal 12px Syncopate; }

The end result is that the mobile template now essentially matches the desktop template view.

Final Thoughts

Now that you've done all this hard work of setting up the CSS for that mobile template, it's now very easy to tweak it by adding any other properties to any section to do other fun things. For example, from here you could very easily tweak the code to do things like:

center the blog title or post titles in mobile view
adjust the font sizes in the mobile view
adjust the colors of any particular section
change the alignment

And of course, any other CSS-based properties. Customize to your heart's content. Personally, I think centering all titles, increasing the font size of titles, and decreasing the font size of the post content, together looks best and more 'modern'. Blogger's default desktop view font sizes are too small, and the mobile template default sizes are too big. Fix it easily by tweaking this code.

Although all this is manageable, it's sure a lot of hoops to jump through. It's disappointing that the customizations you make in the Template Customizer don't automatically get reflected in the mobile template (most do; custom fonts do not). I hope Blogger will address this issue soon, and I believe they will. It seems some new default responsive templates are in the works, that will automatically adjust to the screen size. No more separate template code for Desktop and Mobile views! So this hassle may become obsolete soon. Let's hope so. (Update: Yes, the four new Blogger templates for 2017 do maintain font customizations, as they have no separate 'mobile' template to worry about.)

Happy blogging.