Disclaimer: Google Sans, is a size-optimized version of Product Sans font. Remember that the font falls under Google Restricted license which means it’s not available for everyone to use.
When someone came across your website, the graphics don’t matter to them. All they read is textual content, because of its the source of information. Make a balance between graphics and text. So basically typography means adjusting the text and a good typography place an essential role in your website tone. A good typography ensures a great user experience. Again typography is an art where you arrange all the content of your website while preserving the aesthetic value of your text content. Choosing a font for your website is not very easy. You’ve got to decide different fonts for heading and post body. Test different font combination using Google Fonts, where you can explore tons of fonts. All of the fonts on Google font website is available to use for everyone and is free.
If you wish to use Google Sans in your website, here is how to do so.
Google Sans, see how it looks.
Adding Google Sans font to a WordPress site
The below code is taken from the Google API, which is original. In order to use Google Sans on your website or blog, first, you need to add a source. Second, declare where you want to use it. The API has all font language variants, here is the Latin version of 400 (regular) and 500 (medium) font weights.
Apart from this, there are quite a few other variants such as 700 font-weight. More language like Greek, Vietnamese and Cyrillic.
Tip: click on “Download raw” and copy entire CSS.
Adding source.
In some WordPress themes, there is an option in theme settings to add custom CSS code. This is exactly same as you have to add or change some CSS value accordingly. For example – you have to change the color of your font. You add a new CSS code. Upon loading the site, you see new font color because the code you added is applied and overrides on the old code.
In order to add a Google Sans source, copy the following code and paste it on WordPress > Appearance > Editor > Additional CSS area. For those who want to add it via HTML, continue reading.
If you have access to WordPress theme files, add the following line. The method works on WordPress, Blogger, and Github pages. Use the insert header and footer WordPress plugin for ease.
Another way to add a font is to add a script to a single line so that you can use some plugins such as Insert Header and Footer. Once installed, you will find text fields to add a script where you can insert the following script.
<link rel=’stylesheet’ href=’https://fonts.googleapis.com/CSS?family=Google+Sans:100,300,400,500,700,900,100i,300i,400i,500i,700i,900i’ media=’all’ />
Declaring it.
After adding the source, add another CSS code to declare the font-family to post body. You need to use inspect tool to determine where you need to apply that.
body p {font-family: Google Sans;}
Set the font to the entire website by putting the following line.
body {font-family: Google Sans!important;}
If you still facing issues, drop a comment, and I’ll be happy to help you.
Using Google Sans font in blogger blog
Blogger or Blogspot is free blog service from Google. Since you can edit your theme script, adding this line will add Google Sans font to your blogger blog.
- Access the blogger blog.
- Navigate to Theme.
- Click EDIT HTML.
- Paste the following code after the
<head>tag.
<link rel=’stylesheet’ href=’https://fonts.googleapis.com/css?family=Google+Sans:400,500′ />
Other options.
Download Google Sans for Desktop (TTF).
Google Sans is a size-optimized version of the Product Font. You can get Product Sans free from befont website.
I would like to remind you, this font is not available for everyone to use. However, it’s foolish to think you’ll get
