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”.
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
#2. Choose Font-weight, Download & Unzipped it to your local storage
#3. Go to Font Squirrel and upload your fonts to create a new Webfont
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
Two ways to implement Google Noto fonts
There are 3 ways to implement the Google Noto fonts:
- Elementor custom Font which is only available to Elementor Pro users (Self-Hosted)
- 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
You will see the welcome screen.
Step#1(B): Add New Font & Upload your font in 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
Step#1(Cb): Global Fonts
Set the font-family to Noto Sans to the Primary, Secondary, Accent and, Text global settings.
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.
Step#1(Cd): Set up Global Typography settings
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
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
Hello Elementor
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
Step#2(D): Elementor's Editor - Typography Settings
Hello Elementor
