change font - Noto sans, which is not in Weebly options

Hi. 

I want to change fonts for General/Paragraph text.

Noto Sans, which is not supported in Weebly.

How can I put new fonts in Weebly and apply to them?

Please let me know.

Thanks

1,781 Views
Message 1 of 3
Report
1 Best Answer

Best Answer

@sieun Noto Sans is in the Google Font library so you can incorporate this into your Weebly site fairly easily. First, you'll get the link reference code from the Noto Sans page at the Google Fonts site: https://fonts.google.com/specimen/Noto+Sans. The code looks like this:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">

You'll add this code to your site head section. To do this, in the Site Editor, click Settings > SEO (in the left-hand sidebar) and then scroll down to the "Header Code" input box and paste the code above into it.

To change the body/paragraph text to this font family, you can add the following code right beneath the code above:

<style>
body, p, div.paragraph {
font-family: 'Noto Sans', sans-serif;
}
</style>

You could additionally set the font size, color, weight, and other attributes here as well although you should be able to also do this directly with the Weebly theme editing panel for paragraph text. Note that if this doesn't switch the font from the one specified in the Weebly theme panel, add the "!important" qualifier to the font-family attribute ("font-family: 'Noto Sans', sans-serif!important;").

Click the green Save button at the lower right corner of the page and then exit Settings by clicking the "x" in the upper-left corner of the page.

View Best Answer >

1,772 Views
Message 4 of 3
Report
2 REPLIES 2

Best Answer

@sieun Noto Sans is in the Google Font library so you can incorporate this into your Weebly site fairly easily. First, you'll get the link reference code from the Noto Sans page at the Google Fonts site: https://fonts.google.com/specimen/Noto+Sans. The code looks like this:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">

You'll add this code to your site head section. To do this, in the Site Editor, click Settings > SEO (in the left-hand sidebar) and then scroll down to the "Header Code" input box and paste the code above into it.

To change the body/paragraph text to this font family, you can add the following code right beneath the code above:

<style>
body, p, div.paragraph {
font-family: 'Noto Sans', sans-serif;
}
</style>

You could additionally set the font size, color, weight, and other attributes here as well although you should be able to also do this directly with the Weebly theme editing panel for paragraph text. Note that if this doesn't switch the font from the one specified in the Weebly theme panel, add the "!important" qualifier to the font-family attribute ("font-family: 'Noto Sans', sans-serif!important;").

Click the green Save button at the lower right corner of the page and then exit Settings by clicking the "x" in the upper-left corner of the page.

1,773 Views
Message 4 of 3
Report

Thanks for your help!

1,741 Views
Message 4 of 3
Report