Blogger: Why doesn’t the font work on mobile?

There is currently a bug with the Blogger template system which means some fonts are not automatically added to your mobile layout. We have been waiting many years for a fix …so it probably isn’t coming any time soon. Instead, please complete the steps below to temporarily fix this issue:

1. Find the font you would like to use at


2. Click “Select this font”:

You can select all the fonts you want to use, if there is more than one.


3. Once you have selected all the fonts you want to use, click the panel near the bottom of the screen:


4. Click the “@Import” button:


5. Copy the text shown in the box:

In the example above, we would copy the text:

@import url('');


6. Go back to your blog dashboard at Access the “Theme” section. then click the “Edit HTML” button:


7. Left-click in the editor, then type ctrl + F if you are using Windows. If you are using a Mac, type Cmd + F. This will open up the search bar at the top right of the editor. Now search for the line </head>. You should paste the text that you copied in step 5 into the line above this. For example:

This video shows an example of the whole process:


8. Now click the “Save theme” button

That’s it! The fonts should now work on mobile phones as well as desktops/laptops.

Was this article helpful?


  1. Daisy

    I’ve followed all of the (very easy) steps above and when I search for </head> it doesn’t appear in my coding.

    1. Phil (pipdig)

      Hi Daisy! Are you definitely clicking into the HTML editor before you do the search? There must be a </head> line in the template somewhere, so I’m not sure why it is not appearing. The other option would be to place the code after the first <head> line. This should be visible in the editor as soon as you open up the “Edit HTML” page –

Leave a comment

The link to your website will be visible to support staff only and will not be shown publicly.
If you do not yet have a website, simply enter "none" in the box.