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 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:
  1. Add a few lines of code to the template to load the fonts we are using
  2. Add a few lines of CSS to display them in the mobile view

But first, let me show you an example of what I mean. Scroll down to the next section if you want to jump right into the code.

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


Correct fonts/styles on desktop


Here's a blog using one of the "Awesome Inc" default templates. In the template editor (Template → Customize), I chose a variety of interesting and neat-looking fonts from Blogger's drop-down lists.

Even though Blogger's default templates' styles look a little bit outdated, we can make them look more modern and smooth by using better fonts at larger sizes.

Desktop view, utilizing a variety of fonts

I wanted a variety fonts, so for this example the blog uses:
  • 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 of Blogger's 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 use the nicer non-standard fonts on your blog, they only show on desktop view, and meanwhile a generic font is used on mobile like above. This seems to happen to any text style that uses a font other than these:
  • 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:

  1. we need to manually tell the template to load these fonts
  2. we need to instruct the fonts to be displayed via CSS


Change the template code to make the fonts show in the mobile view


Now it's time to add the codes to make the fonts show on mobile views.

1. Add the fonts to the blog template


Make a list of which fonts you are actually using in your template. Again, ignore any of the basic ones listed above. Just make a 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
  • Fontdiner Swanky


For each of those, I need to enter a single line of code in my template (Template → Edit HTML).

To do this, first find this line near the top of your template HTML:

<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 will add these codes:

<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'/>


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


Now that we added the fonts to the template, we still need to add CSS to show them. This part can be annoying, since we need to do it manually for each part/area/section of your blog.

For example, if you chose a special font for the blog title, we need to add a code entry for the blog title -- one entry for each and every section we want to customize. Don't worry, just copy and paste from my example.

Here's a cheat-sheet of common sections you likely will want to customize:
  • 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 from before, I would add the following code to my blog template's CSS (Template → Customize → Advanced → Add CSS). I've added comments to the code so you can see what each part is doing. 

/* 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.


Desktop view, customized in Theme Editor
Mobile view, customized by my code

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. Basically, adding .mobile before any CSS element will affect the mobile template version.

Personally, I think a good way to get a more "modern" look on these older templates is to:

  1. center all titles
  2. increase the font size of titles
  3. decrease the font size of the post content


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 in both desktop and mobile views, because they don't have separate 'mobile' template to worry about. They dynamically adjust to screen size.

Happy blogging.


Comments

thank you so much for this information. I was pulling my hair out trying to figure this out. Now, can you offer any advice for keeping the background fixed in the mobile template? Even though I have set it to fixed no repeat in the desktop version, it still scrolls in the mobile version.
Sam Nordberg said…
Maybe change "background-attachment" to fixed. More on that here: http://www.w3schools.com/cssref/pr_background-attachment.asp
Nin said…
Oh my!! THIS IS exactly what I looked for since 18 months ago. Happy that I've found your tutorial and applied to my blog. Cheers! ;>

Thank you so much.
Sam Nordberg said…
Glad it helped you! Yes, this was a pain to figure out. I'm surprised Blogger doesn't do this automatically.
Adrienne said…
hi there! thank so much for this tutorial, it's exactly what I'm looking for! Unfortunately, I had trouble applying it to my blog. I've been trying to get my blog title in Kenia for the longest time. I even re-did the codes by hand to make sure the copy + paste translated correctly. Any thoughts on my potential error? Thank ya!
Sam Nordberg said…
You mean this blog? http://www.adrimarkines.com
It looks like you're already using Kenia, without problems. The template you're using right now (Soho) is one of the newer responsive themes, which don't have the problem my post was talking about. Contempo, Soho, Emporio, and Notable won't have any problem like this.
Unknown said…
Hello i'm trying to apply this method but the difference is that i'm not using a google font, is there any way to do the same thing when I'm using a font of which I have the url not on that site? It's showing up on desktop but not on mobile Thank you!!
Sam Nordberg said…
If you have the font URL, the same thing should work. It may depend on the font though. What's your blog address? I'm no expert but I could take a look.
Unknown said…
This is the blog: https://got7-italia.blogspot.it/ I already applied this guide to use a custom font and it works when I apply it, but only on desktop. (https://goo.gl/dDv1WR) Thank you for your time! :)
Sam Nordberg said…
I don't see where you added the custom font. It looks like you're using just standard Blogger fonts even on desktop. By the way it looks like you're using the Blogger Emporio theme. These new themes don't use separate templates for desktop/mobile, so there will be no difference between them. In other words, my post here is only for the older themes. The 4 newer themes fundamentally don't have the mobile font problem.

Now if you're still trying to add a custom font, that might be tricky. The post you linked to is giving instructions for the older templates. Emporio is different. It looks like you're using the Ubuntu font on it, which will appear both desktop and mobile.
Hi i'm attempting to apply this technique however the distinction is that i'm not utilizing a google textual style, is there any approach to do a similar thing when I'm utilizing a textual style of which I have the url not on that site? It's appearing on desktop yet not on portable Much obliged!!
Sam Nordberg said…
I'm not 100% sure but I'd imagine something similar would work as long as you have the correct URL of the font file. The CSS might need to be modified though.
슈주야❤ said…
How to change font size for blogger mobile site?
Hello,

Could you help me with a custom CSS code of how to make text in mobile view not to appear HUGE on mobile devices without affecting text size in PC or tablet view?
Sam Nordberg said…
What's your blog? Maybe I can take a look.
Sam Nordberg said…
If just for the mobile view, you can add ".mobile" before the CSS for whichever element you want to change. For example, to change the size of the post text, use:

.mobile .post-body {font-size: 40px;}
Sam Nordberg said…
In the Blogger template editor, set the font size you want for desktop (non-mobile view).

Then add this code in the "Add CSS" section. Change the size to whatever number you want:

.mobile .post-body {font-size: 10px;}
Oluwasegun said…
Thanks very much for this tutorial sir,, it was a life saver for my blog
Sam Nordberg said…
Glad it helped.
Anonymous said…
Thanks dude
Yinyin said…
how do u customize blogger thumbnail?
i used this
.mobile-index-thumbnail {
width: 640px;
}

but its not working
Sam Nordberg said…
That will adjust the size of the container that the thumbnail is in. To style the thumbnail image itself, you need this:

.mobile-index-thumbnail img {width:640px;}

But do you want your mobile thumbnail stretched that big? On mobile that would look terrible.

Another issue is that the mobile thumbnail images are generated at 72x72 px. So even if you change its size in CSS, the image itself doesn't change size. As a result, it will end up looking fuzzy and unclear. You'd have to edit the blog template itself if you really want larger images on mobile. To do that, check out this tutorial; it may be what you're looking for:
https://www.carrieloves.com/2016/04/how-to-increase-the-size-of-blogger-thumbnails-mobile-template/
Hey Sam! Thanks for sharing. You article help me. However, for Notable theme it's not .mobile in CSS code. I posted an instruction of how to change body font size for those who has Notable: https://blog.bebyk.me/2019/07/font-size-notable-mobile.html
Sam Nordberg said…
You're right. The method I mentioned only works for the now-older style default templates. The newer post-2018 templates use a different class just as your post outlines. Good resource so I'll make it a link here: https://blog.bebyk.me/2019/07/font-size-notable-mobile.html
Fedekerplunk said…
Hi Sam, I need to apply Comic Sans MS font to a table but "keeping the desktop template" on mobile, but I just want to edit the table's font, not all the body, if you could help me I'll thank you too much & acknowledge you on my blog, from now, thanks in advance. Luck & greets
Sam Nordberg said…
The easiest way would be to add this to your blog designer in the "Add CSS" box:

table tbody {font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', 'Lobster', fantasy, cursive, sans-serif;}

However, some modern browsers don't have support for displaying Comic Sans anymore. So I listed several other options there that will hopefully make your table look similar to Comic Sans.

If it still doesn't look right to you, you may have to direct the browser to fetch the Comic Sans font. That means adding both a line of code to your "Add CSS" and another line of code to your blog header (in the Template HTML editor). See here for how to do that: http://allfont.net/download/comic-sans-ms/
Koshka42 said…
Thank you! My blog was displaying fine on mobile until suddenly a couple of hours ago, so this will help put it back as I like it :) Question: is it necessary to indicate font size for these? Just wondering if no font size is given will it default to a mobile-friendly size, or is it imperative to dictate a specific size?
Sam Nordberg said…
If a size isn't specified it will take the default size for text on the page which for mobile view is usually an appropriate size. In fact when I add widgets to a blog I usually remove any font size references because I find they generally do more harm than good.
Nicole Orriëns said…
Hi, do you maybe now how to increase the font size of a blogspot on mobile? I did it in the customizer and it's working on Desktop. But on mobile the font is still too small.
Nicole Orriëns said…
I added .mobile .post-body {font-size: 40px;} to the css in de customizer but it didn't do anything.
Sam Nordberg said…
Nicole, I checked one of your blogs (kdramaholic.nl). It looks like you're using newer themes that's are dynamically responsive. My instructions in this post are only for what are now the "older" style of Blogger themes, which used different theme code depending on desktop view or mobile view. The newer themes use the same basic code set for both, so by default, there isn't any mobile-specific CSS to modify, at least not that I see. Sorry.