Georgia Lou Studios

Welcome to the Help Center!

Customizing Colors & Fonts | Prima Donna

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!

IMPORTANT: While customizing your site, make sure you deactivate any "CACHE" plugins or learn how to clear your cache if your host has server-side caching (contact your host to find out how). Also learn to clear your web browser cache so you can see changes live: Refresh Your Cache. (A cache stores an old copy of your site a you may not see changes for hours unless you clear your cache).

 

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

 

1. Go to Appearance > Customize

2. Find the Colors & Fonts tab and click on it to open the customizer panel

3. The sections inside the Colors & Fonts panel are broken down by area based on website location. i.e. Top Bar, Primary Menu, Site Title & Description, Header Right Menu, etc.

Color and font settings are combined under these locations.

4. In this tutorial, we are going to go over changing the colors and fonts in the Primary Menu. This will cover all the types of settings available in this theme.

5. Click on the Primary Menu tab to open the setting section.

6. The first group under Primary Menu is the Top Links. These are the main links on the menu.

7. The first setting under Top Links is Font Family. The current font will be displayed in the drop down menu. The drop down menu contains all of the current fonts available at Google Fonts: https://fonts.google.com/

Select the font of your choice from the drop down menu.

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

9. 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.

10. 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.

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

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

13. 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.

 

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

NOTE: If you have issues with your font changes "taking", make sure you go through and set a non-default font for ALL font settings, even in sections you may not be using like the Header Right Menu, etc. WordPress has issues with registering default settings so sometimes if you have default and non-default settings it scrambles its brain a bit. Setting all fonts to non-default settings will fix any font setting issues.

 

 

 

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

Comments

Powered by Zendesk