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 for Google Noto on Search engine,the first search results is a Google Noto and you have to click the link in order to access the fonts.
You will get something like this when you search “Google Noto font”
02
3 ways to Implements your Font
This is the second step for implementing Google Noto fonts.When you click the links,you will find list of Noto Font-Family,it is Gigantic in size and Gigantic in font libraries but you can choose it from list that are given by Google but Elementor has already added some Noto fonts if you don’t like it or the font are not available yet ,you can use my implementation.
You have 3 options to implements the fonts:
- Elementor custom Font that are 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 stylesheet.
- Or Using Elementor pro -Custom CSS
03
Elementor Custom font option
This is one of the easiest and fastest method to implements it to your website and it is self-hosted which means you have to download the fonts and upload it your website to use it or Read it from Official Elementor blog
Now go to Elementor > Custom Fonts > Add new > give a name > add your Font variation ranging from WOFF,WOFF2,TTF ,SVG and EOT File. For me I choose Noto Sans Gothic it contain only 1 style and TTF format.
On Front-end under Typography
or Watch the video to learn more -
ii
Using Custom Fonts plugin from Brainstorm force
If you don’t have Elementor pro,you can take advantages of Custom Plugins developed by well known theme developer Brainstorm force.Before implementing don’t forget to see compatibility.
If you are using WPAstra theme or other any popular theme. They have already included some of the Noto fonts but it seems like it is only available for Astra Users.
But don’t worry,if you are using Hello theme or Underscore based theme,you can embedded directly to your theme stylesheet (style.css) and here how to do it.
Appearance Editor > Choose the theme that you are embedding > Unminify your CSS first to understand it better > click on any area > Use Cmd/Ctrl + F to enable Search function > Then type “font-family” to see any font family available > default may be arial,helvtica etc you can add your own Google Noto fonts if interested and it will be something like this and i prefer to add under HTML.
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-family: 'Noto Sans Gothic','Arial','Helvitica',sans-serif;
}
iii
Using Elementor pro: Custom CSS Option
This is really easy way to do it if you know some CSS if now hang on and i am going to show you how it is done. Make sure you have Elementor pro or the free version both will do the trick
For Elementor pro users and Free user –
For Pro user,I took Noto Serif Lao (Lao) as an example-
First go to advanced tab > advanced > give a CSS id or CSS classes name -“noto” as CSS classes as an example > Custom CSS > add this code
.noto .elementor-heading-title{
font-family: 'Noto Serif Lao', serif;
font-weight: your choice;
}
instead of CSS classes you can use “selector” but if you are going to use “Noto font” frequently the best option is to use CSS classes because you don’t have write the code again just insert CSS classes and boom it will instantaneously updated.
This is an example of Noto Serif Lao (Lao) font using Custom CSS
For free user :
You can use Theme Customizer option or Stylesheet or Simple CSS plugin to do it
.noto .elementor-heading-title{
font-family: 'Noto Serif Lao', serif;
font-weight: your choice;
}
But you don’t have the option to insert directly to the Elementor itself but the code are just the same.
We hope you understand something from this blog post, if you are going to implement it let us know on comment below.We ove to hear it from you.
Thank you
