![Implement and Host Google Noto fonts Locally](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1898" height="936"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
Table of Contents
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](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1614" height="914"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1885" height="873"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
#2. Choose Font-weight, Download & Unzipped it to your local storage
![Next step is to choose Font weight](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="486"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
#3. Go to Font Squirrel and upload your fonts to create a new Webfont
![font Squirrel landing page](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1501" height="931"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1245" height="333"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
![Noto Sans - Page weight after](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1252" height="354"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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.
![Describing how to access Elementor's Custom fonts](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="449" height="443"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
You will see the welcome screen.
![Welcome Screen of Elementor custom fonts](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1404" height="851"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
Step#1(B): Add New Font & Upload your font in different font-weight
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="768" height="473"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
or Watch the video to learn more -
Step#1(C): Set up Global Fonts
Step#1(Ca): Site Settings
![Click the Hamburger menu to open settings](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="496" height="912"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
![Elementor: Site Settings](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="477" height="938"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
Step#1(Cb): Global Fonts
![Select the Global Fonts](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="481" height="935"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="484" height="930"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="479" height="694"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
Step#1(Cd): Set up Global Typography settings
![Global Typography for Body and heading tag](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="487" height="921"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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
![WP Astra Custom Fonts](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="768" height="345"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
Step#2(B): Go to Appearance then Custom Fonts
Add your Google Noto Fonts here or any other Google Fonts or Custom fonts.
![Custom Fonts under Astra Options](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1394" height="894"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
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.
![Noto Font under theme Customizer global settings](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="375" height="859"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(181,115,50,0);rgba(181,115,50,0.1);rgba(181,115,50,0)" dur="2s" repeatCount="indefinite" /></rect></svg>)
