Google is awesome!

Since 1996, Google is working hard to help us serve and  make use of the Internet information for free (not actually free).

Google works kinda like information aggregator, it collects data from bloggers and information websites to serve the right content to the right keyword.

But people are smart,

Long years back, Internet was wow, nobody had an idea about the impact it’s gonna make. Everybody was accessing and sharing information over Internet and the game of typography started even before that.

Typography

If you ask me what’s the most important part about reading, I’d say “typography”. Typography has it’s own psychological impact on our brain and it works really well. Better the typography is, more engaged the user will be (depending upon the content).

I never used to worry about typography, but few years back when I joined Medium, (a wonderful content platform) the importance of typography in an article really struck me hard.

I was very much comfortable reading and writing in Medium compared to any other platforms like WordPress etc. (including this blog).

So,

I thought I’d learn more about it with the help of Medium and I ended up making the typography of blogbeatz like this, so that you can read it smoother.

Important : Let me know if the typography of this blog sucks. The typography of this blog is inspired from Medium and Pocket, please comment your feedback.

Google Fonts

They use my data, my privacy is at Google headquarters, but I couldn’t accept the fact that they are changing people’s life like anything. In fact as a blogger, Google is helping me make a living with what I love!

Ok, Google fonts is free to use!

As you might know that Google fonts is a free to use platform where you could find plenty of fonts (awesome fonts) and use them on your WordPress blog.

google-fonts

 

and you can use them to customize your WordPress blog (yes, for free)

I’ll tell you how.

WordPress blog

Let it be your WordPress blog or website, every WordPress theme contains a file called style.css (you’ll find him in the editor) and most of the WordPress themes will have an option to add additional CSS in customizing page or within the theme options.

The process is easy! No big deal.

First of all understand the fact that WordPress themes are developed so beautifully and in an organised way. You’ll find lots of CSS classes (obviously) and don’t get confused.

CSS class contains the design code to be executed in a particular area. There are lots of CSS classes in a WordPress theme.

First thing first,

Go to Google fonts and select your fonts. In my case, I chose 2 fonts (one for content and one for heading) and I’m happy with it (totally happy with it).

After finding out your favorite font (or may be the best readable font) click on the add button right here,

add-button

when you click on that, some black thing (a dialogue box) will show underneath, click on that and it will open up.

may be like this.

dialouge-box

It looks beautiful isn’t it? (not really)

Well, you can do some customisations, check the load time (it’s fast) and you can see some codes. You could even download the font for local use. I’d recommend you to customize the font before putting it into the blog.

like this., or

customize

Anyway, let’s move on.

In the EMBED section, you’ll find the code as I mentioned earlier. It’s a small HTML code which should be integrated with your WordPress theme (no, no plugins required).

Take the HTML code which looks something like

<link href=”https://fonts.googleapis.com/css?family=Barlow” rel=”stylesheet”>

and paste it just above the </head> (not </header>) in your header.php file (which is located at Appearance > Editor).

Actually you’re done with code embedding, if you would like to embed more fonts from Google fonts, you could do that too. Select all the fonts you want to use and take the code as a whole,

something like this.

font-families

50% work done!

Now there are two factors to consider before making the final change.

If you’re using a normal theme, you’d have to go to your Apperance > Editor and use the CSS code within the CSS class (I’ll tell you how).

Or if you’re using a bit professional theme with an option to add additional CSS, ( a column where you can simply put CSS code and make it work) that’s obviously the easiest way. The location might be in

Appearance > Customize, like this

additional css

Or within your Theme options (you’ve to find it out).

Finding CSS class

Thanks to Google again, the inspect element feature in chrome is wow. The process is very simple, you have to select the content and right click – Inspect element.

You’re done! Now you’ll see the CSS class which is the only thing we need to make the changes.

Here’s a short video (459KB) to explain the process.

 

So now you’ve got the class which in the above case is,

.entry-content p

Different developers and millions of themes, so make sure you find the right CSS class. Also note that there are so many other CSS classes in your theme, you’ll have to find out each CSS class for each element (like heading, content etc) and work accordingly.

In my case, I found out 3 CSS classes including content, heading and title of the blog. That was all I need to change.

Hope you got the idea! If not, read again.

Now,

Case 1 : Additional CSS Option

Go to the additional CSS option (that box) and paste the CSS class name and put golden brackets.

Eg :   .entry-content p { }

within the golden brackets, add the CSS code from Google fonts. I mean this one,

css-code

and then put it inside those golden brackets.

like this,

 .entry-content p {

font-family: ‘Lato’, sans-serif;

}

That’s it, you’ll see the change right away. I’ll put an example video below, it’s just 484 KB (here’s the secret)

 

 

Now you’ve an idea. You can go ahead and make changes within your blog, change the H2 tags and everywhere possible to make it look beautiful.

Case 2 : Manual CSS Integration

manual-css

Did you see that? No, not the time I drafted, that editor thing? okay!?

Now, you’ll see a file called style.css at the right side of the editor page, that’s where you gotta play.

Important : Even if you make changes in Case 1 : Additional CSS, it will go directly to style.css and will be executed, so process behind both are same.

Open Style.css

Press CTRL + F or CMD + F , type in the CSS class which you just copied after taking it from inspect element. Within the golden brackets, add the CSS code which you just copied from Google font.

//refer case 1 if confused.

clear? alright.

Now go refresh your blog posts and you’ll see those beautiful changes in your typography. You can customize the font, you can change the font and use some other ones from Google fonts, you can do whatever you want to make your blog look beautiful and attractive.

It’s that simple.

Tip : Use extras like font-weight:700; font-size:21px; etc to make the adjustments within the CSS class itself (Refer this page for more customisations).

Working

It’s like embedding a youtube video in your page. With Google fonts, you’re embedding your favorite fonts within the header.php file on your WordPress blog.

There are CSS classes already written within your blog stylesheet, you’re just customising it here.

Warning : Be very careful before updating the theme. Make sure you keep a backup of the custom CSS codes and edits, because an update may replace everything.

Hope you’re clear about this tutorial, I’ll be writing few more in the coming days, make sure you let me know your comments about the article, typography and about some cool fonts you just found.

# #

November 10, 2017

Comments

Leave a Reply