Step 1. Change your fonts to "default"

Go to "Design>Change Fonts>", and depending on which text you intend to apply Google Fonts to, change "Site Title", "Paragraph Titles", and/or "Paragraph Text" to "Default".

---

Step 2. Get your font

For this specific demo site, we're going to change the Paragraph Title Text to the font "Rock Salt". Go to google.com/fonts# and search for your font. Once you've found your font, click on "Quick-use>Step 3.>@import". Copy the code contained within the "@import" tab.

---

Step 3. Open Weebly's HTML/CSS editor

Go to "Design" at the top and then click on "Edit HTML/CSS at the bottom".

---

Step 4. Paste your google font code

Click on "main-style.css" on the left and paste the Google Font code you copied from Step 2. towards the top of the "main-style.css" file.

/* Google Fonts
--------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);

---

Step 5. apply google font to your site's text

This is the step where we connect our Google font to the text of our Weebly site. Depending on which text on your Weebly site you're applying the Google Font to, add the appropriate bold code(s) from below and change the text in orange to the name of your Google Font.

/* Google Fonts
--------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
#wsite-title { font-family: 'Rock Salt', sans-serif; } /* Site Title Text */
h2 { font-family: 'Rock Salt', sans-serif; } /* Paragraph Title Text */
p { font-family: 'Rock Salt', sans-serif; } /* Paragraph Text */


Click save.

---

You're done! 
Publish your site to see your new google font!

---

Tip & Additional information

Once you've installed your Google Font, the changes to your website's text will only be seen on the published site and not in the Weebly Editor.

---

comments powered by Disqus