Learn how to implements Google Noto fonts using this 3 simple techniques i.e Embed using Elementor pro - Custom css or Self-Hosted using Elementor Custom Fonts or Theme stylesheet in Step -by- step tutorials.

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”

Google Noto
Search Result on Google Noto

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:

  1.  Elementor custom Font that are only available for Elementor Pro users (Self-Hosted)
  2. Custom fonts plugin by Brainstorm force. (Self-Hosted) or if your theme doesn’t support the plugin, you can manually added it your stylesheet.
  3. Or Using Elementor pro -Custom CSS

1st Technique

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 -

Play Video

2nd Technique

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;
}

3rd Technique

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

Elementor Page builder

Foxscribbler : Fine Crafted Elementor Tutorials

This site is powered by our Favorite Theme builder Elementor pro and it contains Affiliate links,which means that if you buy, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.

RELATED

Tutorials