Change the Metro Pro fonts to be more blog friendly

[westerdaled]

Hi

I quite like Metro Pro in overall but I have noticed that the chosen font family seems better suited to a magazine style website. I want the more traditional blog and if I write anything technical; I want it to be very easy on the eyes. Here is an example of what I have in mind:

https://medium.freecodecamp.org/mindset-lessons-from-a-year-with-react-1de862421981

So is there an easy way with styles.css, separate override css or plugin which means I can change the: font family, size, weight, line spacing etc to one similar to the above example without breaking the overall theme? Indeed, with the help one plugin author I had scale up a number of the size declaration because Metro Pro's font size being set size tiny, and then scaling up everything else up. That took a while to sort out ;-(

https://westerdale.blog

[AnitaC]

Well, you could try Mike's plugin here - https://thestizmedia.com/styles-genesis/. It's premium plugin but works with a host of StudioPress themes including Metro. Take a look at that. Otherwise, you can maybe try the Google Fonts plugin that's in the WordPress plugin repo.

---

Need help with customization or troubleshooting? Reach out to me.

[westerdaled]

Ok I will check out your suggestions. I suspect there are a number of fonts etc that look great on tech blogs.

[westerdaled]

Hi Anita

Mike's plugin is impressive. Thanks . What is is the advantage of google fonts out interest and also, I take it they are referenced from the Google CDN?

[westerdaled]

Hi @AnitaC

Mike the author of the plugin also suggested using Google Fonts, so I have downloaded the plugin from the WordPress Repo as per your suggestion. Any hints please on fonts similar to the font used my Medium:

medium-content-sans-serif

There are quite a few to choose from.....

[Victor Font]

All Studio Press themes use Google fonts. The fonts are enqueued in the child theme's functions.php. It's very easy to change fonts without using a plugin. In fact, if you use a plugin, you probably aren't disabling the original fonts used by the theme, which adds to the loading time of your site. You'll also have to edit the CSS to change the font names used by specific classes.

You don't have to use Google fonts either. You can use any web fonts you want. Fonts can be loaded from your child theme directory. I do this for all of my client sites because I hate it when I see a message at the bottom of my screen that the site is waiting for the Google fonts CDN to respond.

This article explains how to use Google fonts locally, but the same process can be used for any web font: https://victorfont.com/use-google-fonts-locally/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[westerdaled]

Hi victor

Thanks for your interesting comments.

Initially, I just disable this

wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Oswald:400', array(), CHILD_THEME_VERSION );

Then as per you blog post change the CSS to point to my downloaded fonts.. Looks like good advice. Ok just need to spend some times looking at a font I can fall in love with.

Also, I think I need to make some other changes to Styles.css to reflect the new fonts.
Looks like both of these will need amending

html{font-family:sans-serif;.....}

body {
	background-color: #fff;
	color: #222;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.625;
}

[Author]

Posts