Website Building » Weebly » How Do I Add Google Fonts to Weebly?

How Do I Add Google Fonts to Weebly?

Last updated on December 30, 2022 @ 5:38 am

If you’re looking to add some personality to your website, Google Fonts is a great place to start. Weebly makes it easy to add custom fonts to your site without having to edit any code. Here’s how:

First, head over to fonts.com. There, you can browse through hundreds of different fonts and preview how they would look on your site. Once you’ve found a font you like, click the “+” button next to it.

A pop-up will appear asking you which styles of the font you want to include. For most fonts, there will be a “regular” style and one or more “bold” styles. Select the styles you want and click the “Add selected families” button.

Next, a box will appear with a code snippet in it. Copy this code and head back over to your Weebly site editor. In the left sidebar, click on “Settings” and then “Site Styles”.

In the Site Styles editor, scroll down until you see the “Font Family” section. Paste the code snippet you copied from Google Fonts into the box next to “Custom CSS”. Then click the “Save” button at the bottom of the page.

PRO TIP: The Weebly platform does not currently support the Google Fonts library. While it is possible to add custom CSS to your Weebly site to use Google Fonts, this is not a supported method and may cause unexpected issues with your site.

Now all you need to do is add some CSS styling to actually use your new font. The best way to do this is by adding a new “Class” in the Site Styles editor and then applying that class to the element(s) on your page that you want to use the font for.

For example, let’s say we want all our H1 headings to use our new Google Font. We would first create a new class in Site Styles and call it something like “.my-google-font” (you can name it whatever you want). Then we would add this CSS code into the box next to it:

.my-google-font { 
  font-family: 'Roboto', sans-serif; 
}

(Replace ‘Roboto’ with the name of your Google Font.)

Then we would go back into our Weebly editor and find all the headings we want to use our new font for. For each one, we would open up the settings panel and under “Advanced”, we would add “.my-google-font” into the “CSS Class” field.

This is an H2 heading using our new Google Font!

This is an H3 heading using our new Google Font!

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.