Thursday, December 10, 2015

Use "Lato Font" in Google Blogger

As you can see in Google Blog Designer, there is no Font Lato to choose:
Happily, you can edit Template HTML and apply that font manually.
  • Go to Draft Blogger -> Template -> Edit HTML
  • Locate </head> closing tag
  • Before that line, add line:
    • <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
  • Locate tag <b:skin> and <b:skin> tag. Replace every occurrence of "Arial, " with "Lato, Arial, "
That's pretty much it. However, I noticed that the post became a little less readable than it was before (but it looks a lot more Flat/Material/Cool/Cutting-Edge though). To fix that, I've increased the font size for posts just by one pixel.
  • Locate element <Group description="Post Background" selector=".post"> and add following element as a child (change according to the rest of your font rules):
    • <Variable name="post.body.font" description="Font" type="font" default="normal normal 14px Lato, Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Lato, Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
  • Find .post-body CSS selector and add property font: $(post.body.font);
That's all. Unfortunately, you still won't be able to see font Lato in Google Blog Designer, however the font should be applied on your blog.

Is it the right way of adding custom font to Google Blogger?

After writing my first post ever it made me think... It is really the right way of adding Font Lato or any custom font to Google Blogger? After googling it turns out.. YES! It is: Upload And Use Custom Fonts In-Blogger

PS. After all, I've decided to go with font Roboto, as on My Account Google Page and adjust the style of the blog to mimic that minimalistic design. Hope you like it.

No comments:

Post a Comment