Skip to Main Content

2 Easy ways to host and implement Google Noto Fonts locally

Learn how to implement and Host Google Noto fonts locally using 3rd party plugins & using Elementor Pro without writing a single line of CSS.

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

Search for Google Noto Font

When you search Google Noto on a Search engine, the first search result is a Google Noto

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

Google Noto Search Results
Search Result on Google Noto

Download, extract, and unzipped Google Noto fonts

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

#1. Select fonts to download

Google Noto Sans

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

Next step is to choose Font weight

#3. Go to Font Squirrel and upload your fonts to create a new Webfont

font Squirrel landing page

By default, the .zip file you downloaded contains the .ttf file which is not ideal for a modern website because of the page weight which is over 200KB.

So we have to create our own Webfont that include .woff and .woff2 which is great for a Modern website which is only 25KB max

Noto Sans - Page weight Before
Before the conversion (209KB)
Noto Sans - Page weight after
After the conversion (25KB max)

Two ways to implement Google Noto fonts

There are 3 ways to implement the Google Noto fonts:

  1.  Elementor custom Font which is only available to Elementor Pro users (Self-Hosted)
  2.  Custom fonts plugin by Brainstorm force. (Self-Hosted)

This is the fastest way to self-host Google Noto on your website and it is self-hosted which means you have to download & convert the fonts then upload them your website to use it.

Step#1(A): Hover your mouse to the Elementor sidebar and Click the Custom Fonts

Describing how to access Elementor's Custom fonts

You will see the welcome screen.

Welcome Screen of Elementor custom fonts
You will see empty screen

Step#1(B): Add New Font & Upload your font in different font-weight

Upload custom fonts with different font weight

or Watch the video to learn more -

Step#1(C): Set up Global Fonts (Available with Free and Pro plan)

Step#1(Ca): Site Settings
Click the Hamburger menu to open settings
Click the Hamburger menu to open settings
Elementor: Site Settings
Step#1(Cb): Global Fonts
Select the Global Fonts

Set the font-family to Noto Sans to the  Primary, Secondary, Accent and, Text global settings.

Set primary, secondary and other Global fonts to Noto Sans
Step#1(Cc): Set up Global Typography settings

Under theme style, select the typography and set up for the body tag, h1 to h6 tag, button style, etc.

Set up Global Typography
Step#1(Cd): Set up Global Typography settings
Global Typography for Body and heading tag

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

If you are using a WPAstra theme or other any popular theme. They have already included some of the Noto fonts by default but the plugins seem to be working on all the theme. ( I am not sure )

Step#2(A): Go to Plugins - add new and type Custom Fonts

WP Astra Custom Fonts

Step#2(B): Go to Appearance then Custom Fonts

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

WP Astra Theme
Custom Fonts under Astra Options
Custom Fonts under Astra Options
Hello Elementor
Custom Fonts functionalities with Hello Elementor theme
Custom Fonts under Menus tab

Step#2(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 custom fonts.

WP Astra Theme
Noto Font under theme Customizer global settings

Step#2(D): Elementor's Editor - Typography Settings

Hello Elementor
Custom Fonts functionalities in Elementor's editor Typography settings
Custom Fonts functionalities in Elementor's editor Typography settings

Leave a Reply

Your email address will not be published. Required fields are marked *