Georgia Lou Studios

Welcome to the Help Center!

Colors & Fonts | Bel Canto

Follow

This theme comes with many, many customization options. At the same time, the options are easy to manage and (we hope!) laid out in a logical pattern and order so that they are easy to find.

In this article we will cover the basics of customizing your colors and fonts. We will not cover very setting available as that would make a really long tutorial (yuck!) and we know once you get the basics of customizing, you'll catch on quick!

 

All color & font settings are located in the native WordPress Customizer:

* To become familiar with the Customizer see this WordPress 101 video tutorial: Customizing Your Theme

 

Customize Fonts

Step 1: Select a Font

1. Visit https://www.google.com/fonts to check out all the fonts available.

2. Once you pick your font, you will need to get the code to paste into the WordPress Theme Customizer.

3. From the main Google Fonts page, click on the Select this font icon (red circle with + sign).

 

4. The font will be added to a modal at the bottom of the screen called "Family Selected"

 

5. Click on the modal to expand it.

6. The code you need for your fonts as labelled 1 and 2 in the image above.

 

Step 2: Install your font

1. Go to Appearance > Customize

2. Find the Fonts tab and click on it to open the Customizer panel.

1.png

3. The settings are broken down by each section of the theme.

4. In our example, we will change the Site Title font.

5. Click on the Site Title & Description tab to open the settings.

6.Each font setting as 2 parts:

  • Font name
  • Font family

7. In the Font name field, enter the code labeled 1 above. (Make sure to keep any + symbols. DO NOT include quote marks). You can include any font weights, example Open+Sans:900.

3.png

8.In the Font Family box, enter the name of the font (no + signs and no quotes): Open Sans

4.png

9.Font Size - Current font size shown in pixels (px). Use the up/down arrows or type your font size # directly into the field.

10. Font Weight (aka bold) - Font weight is the thickness of the font. From the drop down menu, choose your font weight.

* Note - Not all fonts use all font weights. Please check Google Fonts for info on a particular font.

** Make sure load the appropriate font weight in the Font Name field. i.e. Lato:500

11. Letter Spacing - the distance between each letter. Set the distance in px by using the up/down arrows or directly entering the number into the field.

12. Text Transform (Case) - set your font to none, lowercase, uppercase or capitalize in the drop down menu.

13. Font Style - some settings may include a font style setting (italic or normal).

13.png

14. Click the Save & Publish button when done.

Customize Colors

1. Go to Appearance > Customize

2. Find the Colors & Styles tab and click on it to open the Customizer panel.

 2.png

3. The sections are broken down by areas of the theme.

4. There are 2 general types of colors: Color & Hover Color:

5. Color - Text color. Click on the Select color button. Enter our hex color # or choose from the color picker.

6. Hover Color - Text color on cursor hover. Generally applies to button and links. Click on the Select color button. Enter our hex color # or choose from the color picker.

7. Click the Save & Publish button when done.

 

These are the setting types found in the Fonts and Colors & Styles panels. Some sections may have less options as applicable.

 

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk