Table of Contents
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”.
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
#2. Choose Font-weight, Download & Unzipped it to your local storage
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:
- Elementor custom Font that is only available for Elementor Pro users (Self-Hosted)
- 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.
- 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)
#B. Click the Custom Fonts
#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.
#D. You will find it under Typography settings
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
#B. Go to Appearance then Custom Fonts
Add your Google Noto Fonts here or any other Google Fonts or Custom fonts.
#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.
06
How to give CSS classes or IDs
#1. Go to Elementor Heading widget
#2. Go to Advanced Tab and head over to 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)
#B. 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.
@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
#B. Additional CSS area
#C. 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
