Table of Contents
- 1 Search for Google Noto Font
- 2 Download, extract, and unzipped Google Noto fonts
- 3 Two ways to implement Google Noto fonts
- 3.1 Elementor Custom font
- 3.2 Custom Fonts plugin from Brainstorm force
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
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
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.
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
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 the WPAstra theme only. ( I am not sure about this one please let me know if it works on other themes too.)
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.
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 fonts.