[Pro] Using the Font Customizer in your theme

The Font Customizer is included as a built-in feature in  Customizr Pro and Hueman Pro Theme. It's also available as a stand alone plugin ( WordPress Font Customizer Plugin), for use in other themes.

Accessing the feature

1. Log in to your WordPress Admin.
2. Go to Appearance -> Customize -> Font Customizer

---

Selecting a text element to style

All the predefined settings are named according to the feature of the theme, such as Slider title, Slider text, etc. Therefore, it's easy to find the element that your want to style.



Customizing a text element

When you edit a text element, you see 3 tabs on top of the edit block. 

• Font
• Style
• Selector

Click on a tab to display its set of options.



Remove your customizations

You will notice a small trash button appearing next to the option. You can click on this to remove your




Settings Overview

You can see that for every options there are almost identical sets of settings. It's divided into three sections, Font Family, Font Style and Other settings. We will look into them now.

Font Family

1. Language
   • Click on the drop down to select the language subset.
   • Choose only the characters that you need to reduce loading time.
   • If you are uncertain, you can choose "All languages
2. Font family
   • Click on the drop down to select the Font Family.
   • It's divided into 2 types, Web Safe Fonts and Google Fonts.
   • Web Safe Fonts are fonts that exist in computers. For example, Times New Roman, Times, serif. The font will be loaded in priority if it exists in your computer system, Times New Roman, follow by Times, and lastly serif.
   • Google Fonts are web fonts loaded from Google, you can visit Google Fonts for more details.
3. Apply an effect
   • Click on the drop down to select an effect.
   • You can hover over the options to see the effect applied in preview.
   • For example, applying the effect "3D Two" to the site title. The site title will have a 3 dimensional look.

Font Style

1. Color
   • Click on this color picker to select color for your text.
2. Color on hover
   • Click on this color picker to select hover color for your text.
   • This color will appear when you place your cursor over the text.
   • Note: Some options does not have this setting.
3. Font size
   • Enter number or click on dial to increase or decrease font size.
4. Line height
   • Enter number or click on dial to increase or decrease line height.
   • The definition of line-height is explained in this article.
5. Font weight
   • Click on drop down to select the font weight.
   • Note: This setting depends on the Font family selected, certain fonts such as Advent Pro 100, supports font weight 100, normal, bold, bolder, lighter. It does not support other sizes. Choose a "regular" font, if you need different font weight choices.
   • Select "normal", when not in use.
6. Font style
   • There are 4 font styles available.
     • inherit - follows the font style of its parent element.
     • italic
     • normal - select this when not in use.
     • oblique
   • Click on drop down to select.
7. Text align
   • This sets the alignment of the text.
   • There are 5 choices available.
     • center
     • justify
     • inherit - select this when not in use.
     • left
     • right
   • Click on drop down to select.
8. Text decoration
   • This "decorates" the selected text with 4 choices.
     • none - select this if not in use
     • inherit - follows the decoration of it's parent element.
     • line-through - a line through the text.
     • overline - a line over the text
     • underline - a line under the text.
   • Click on drop down to select.
9. Text transform
   • This sets the case of the text.
   • There are 5 choices available.
     • none - select if not in use.
     • inherit - follows the case of it's parent element.
     • capitalize - transforms the first letter of the selected text to uppercase.
     • uppercase - transforms all letters of the selected text to uppercase.
     • lowercase - transforms all letters of the selected text to lowercase.
   • Click on drop down to select.
10. Letter spacing
    • This sets the spacing between letter.
    • keep this set as 0 when not in use.
    • Enter number or click on dial to increase or decrease letter spacing.

Other settings

1. Override any other style
   • Check this check box, if you find that certain settings above are not implemented,
   • It appends the CSS !important declaration to override any other styles that has been written in stylesheet for this selected text.
   • Note: Use this setting only as a last resort. Any other written css will not be able to override this setting.

---

Styling a custom text element

If there is any text element that you want to style but is not available in the standard predefined elements, you can create a custom one.

First you need to inspect your pages to find the CSS selector of the element you wish to style ( Basics of CSS and HTML for WordPress themes ).

1. Click on Add new
2. Scroll down the list of text elements to the bottom
3. Select "Custom"
4. Enter your css selector ( you can modify the selector afterwards in the "Selector" tab of the created text element. )





FAQ

Question: How to override a font style?

Answer: You will need to override it by clicking on the check box in Other settings -> Override any other style. The process is describe in details in the above documentation under Settings Overview -> Other settings -> Override any other style.

Question: The applied google font does not style my special character.

Answer: You will need to go to Google Fonts website, look up on that font, and see if it supports that special character that you are using.

Question: Can I use multiple fonts on my website?

Answer: Yes, you can. But we strongly advise you not to do so. This is because loading fonts takes time and it will slow down your website loading speed drastically. We recommend you, not to use more than 2 Google fonts on your website.

Question: I can't find the option to style the element.

Answer: In this case, you will need to create a custom control. The process is describe in the above documentation, under Custom Controls.

Useful resources

• What is CSS, What is a css selector ?. Source : Mozilla
• Basics of CSS and HTML for WordPress themes