3 Easy different ways to implement Google Noto Fonts

  • kishorchand
  • Elementor Page Builder
  • December 14, 2018
  • Join the Conversation
  • Modified 9:47 am

Learn how to implements Google Noto fonts using this 3 simple techniques i.e Embed using Elementor pro - Custom css or Self-Hosted using Elementor Custom Fonts or Theme stylesheet in Step -by- step tutorials.

Google Noto Fonts

Sometimes it is not an easy way to implements all Google Noto fonts because it is Gigantic file sizes which is insane to download all of them and implements it but you can use one Font-Family or many as you like.

In this blog post, i am going to share you my idea of implementing  Google Noto font-family step-by-step:

01

Search for Google Noto Font

When you search Google Noto on a Search engine, the first search results is a Google Noto and you have to click the link in order to view & access the fonts.

You will get something like this when you search “Google Noto font”.

Google Noto
Search Result on Google Noto

02

Download, Extract and unzipped the fonts

To self-host, our fonts we have to download Google Noto fonts family to our PC and then extract the fonts. Then we can upload our website to use it.

#1. Select fonts to download

Google Noto libraries

#2. Choose Font-weight, Download & Unzipped it to your local storage

Next step is to choose Font weight

03

3 ways to Implements Google Noto fonts

This is the second step for implementing Google Noto. When you open the links, you will find a list of Font-Family that is Gigantic but you need to choose only one font from the list of Google Noto or choose from Google Noto fonts from Google Fonts.

There are 3 ways to implement the Google Noto fonts:

  1.  Elementor custom Font that is only available for Elementor Pro users (Self-Hosted)
  2.  Custom fonts plugin by Brainstorm force. (Self-Hosted) or if your theme doesn’t support the plugin, you can manually added it your style sheet.
  3.  Or Using Elementor pro -Custom CSS

04

#1. Elementor Custom font

This is the fastest ways to implement Google Noto on our website and it is self-hosted which means you have to download the fonts then upload it your website to use it or Read it from Official Elementor blog

#A. Go to Elementor (backend)

3 Easy different ways to implement Google Noto Fonts 1

#B. Click the Custom Fonts

Click the Elementor custom fonts option

#C. Add New Font & Upload your desirable font-weight

Keep this in mind that when you download Google Fonts from fonts.google.com in the .zip file Google will only include .ttf file, not the WOFF or WOFF2 file format.

Now you have to head over to fontsquirrel: Webfont Generator and generate WOFF and WOFF2 for yourselves.

3 Easy different ways to implement Google Noto Fonts 2

#D. You will find it under Typography settings

3 Easy different ways to implement Google Noto Fonts 3

or Watch the video to learn more -

05

#2. Custom Fonts plugin from Brainstorm force

If you don’t have Elementor pro license, you can install Custom Plugins by Brainstorm force.

If you are using WPAstra theme or other any popular theme. They have already included some of the Noto fonts but the plugins seem to be working for WPAstra theme only.

But let me know if it works on other themes too.

#A. Go to Plugins - add new and type Custom Fonts

WP Astra Custom Fonts

#B. Go to Appearance then Custom Fonts

Add your Google Noto Fonts here or any other Google Fonts or Custom fonts.

WP Astra Custom Fonts - Settings

#C. Go to theme Appearance then Customizer

Now you have to head over to appearance then Theme Customizer to access WP Astra Customizer settings.

After that, you have to head over to Global settings then typography and choose the fonts.

Theme customizer

06

How to give CSS classes or IDs

#1. Go to Elementor Heading widget

For Elementor heading widget

#2. Go to Advanced Tab and head over to CSS classes

Elementor Heading widget advanced tab CSS classes

07

#3. Using Elementor Pro: Custom CSS Option

if you CSS then it is super easy to do it but for non-coder, it is definitely harder. If you have Elementor Pro or the free version both plugins will do the trick

#1. For Elementor pro users

I took Noto Serif JP as an example and you will get the syntax for Noto Serif JP here. 

#A. Go to theme style or Site Settings ( For newer version 3.0)

Click the Hamburger menu to open settings
Click the Hamburger menu to open settings

#B. Theme Style

Click the theme style
Theme Style

#C. Advanced - Custom CSS

Now we have to specify CSS @font-face and add it to the Custom CSS (pro) area.

The syntax looks something like this and your’s may different than mine.

Sometimes for some reason, Custom fonts will load on Elementor Editor but it wouldn’t load on the live site.

So if you define CSS @font-face problems will likely solve.

Go to theme style then click the Custom CSS tab to open custom CSS
Go to theme style then click the Custom CSS tab to open custom CSS

@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Noto Serif JP Black'), local('NotoSerifJP-Black'), url(https://fonts.gstatic.com/s/notoserifjp/v7/xn77YHs72GKoTvER4Gn3b5eMZFqJRkt3Q8XVs92JGKiledLupW3zxgEInRsa.2.woff2) format('woff2');
  unicode-range: U+ffb6-ffbe, U+ffc2-ffc7, U+ffca-ffcf, U+ffd2-ffd7, U+ffda-ffdc, U+ffe0-ffe2, U+ffe4, U+ffe6, U+ffe8-ffee, U+1f100-1f10a, U+1f110-1f12e, U+1f130-1f16b, U+1f170-1f19a, U+1f200-1f202, U+1f210-1f22f;
}

For Elementor heading, it should be


selector .elementor-heading-title{
    font-family: 'Noto Serif JP';
    font-weight: 900;
    color:red;    
    font-size:2rem;
    line-height: 1.5em;
}
}

This is an example of Noto Serif JP font-family with font-weight of 900 using Custom CSS

#2. For Elementor Free user

#A. Go to Appearance - Customizer

Theme Customizer

#B. Additional CSS area

Got o Custom CSS area

#C. Add your CSS @font-face

Add your CSS @font-face

You can’t use the selector here. To work properly, you have to give CSS IDs or CSS Classes (see number 5).


.noto .elementor-heading-title{
font-family: 'Noto Serif Lao', serif;
font-weight: your choice;
}

But you don’t have the option to insert CSS directly to the Elementor itself but the code is just the same.

I hope you learn something from this blog post if you are going to implement it let me know on the comment below.

I would love to help you.

Thank you