Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to use Google fonts?

How to use Google fonts?

You can add external fonts like Google fonts into your theme. This tutorial will show you how.

step 1: choose your fonts
There are a lot of external font style resources out there. The most simple one to use is Google. So our tutorial will mainly focus on Google Fonts because it is so simple to use. First your want to choose your google fonts style and get the font style link and font family name to insert into your theme:

Click to enlarge Imagegoogle-fonts-1

Step 1: Insert Google Font Style HTML Code

Keep Google’s font page open in your browser so you can get the codes when you needed. Now click here to open your Weebly Editor. First we need to insert the font styling link so the theme can get and display the font style.

1.Copy the font style link bracketed in PINK shown below:

Click to enlarge Imagegoogle-fonts-1

2.Click into “setting” then into “SEO”

3.Here insert the “HEADER CODE” area:

Click to enlarge Imagegoogle-fonts-setting

Step 2: Insert Font Family in Main_style.css

1.Click into “design” then into “edit html/css”

2.Click on “main_style.css” to open the css page

Change theme wide font styling

Here locate this code:

body, h1, h2, h3, h4, h5, div.paragraph, div.paragraph, span, div, .wsite-elements .wsite-image div, .wsite-elements .wsite-caption, .imageGallery .galleryCaptionInnerText div.paragraph, .imageGallery .galleryCaptionInnerText, .blog-post {
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 120%;
}

**Depending on the theme you are using, the code may JUST be body. The key is to locate the font-family: in the body code shown above

Change font family

Copy the font style link bracketed in BLUE shown below:

Click to enlarge Imagegoogle-fonts-1

Replace the font-fmaily code:

font-family: 'Open Sans', sans-serif;

Change theme paragraph font styling

Here locate this code:

p { font-family: "Source Sans Pro", sans-serif; color: #2f2f2f; font-size: 18px; margin-bottom: 5px; line-height: 145%; }

**Depending on the theme you are using, the code may JUST be body. The key is to locate the font-family: in the body code shown above

Change font family

Copy the font style link bracketed in BLUE shown below:

Click to enlarge Imagegoogle-fonts-1

Replace the font-fmaily code:

font-family: 'Open Sans', sans-serif;


Step 3: Save & publish
Save your change and re-publish your site. You will see ALL the font styling for your site will change EXCEPT for the navigation menu which have independent styling code