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

This documentation is for using the Font Customizer in a Pro Theme.

Accessing The Feature

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

Available Options

We will run through the available options .

  1. Custom Controls
    • Use this for creating your own font styling control for elements that are not available in standard controls.
    • Click on the word Custom Controls to reveal it's settings.
    • We will discuss how to use this option later.
  2. Body
    • Default website font - the font for the whole site.
  3. Header
    • Site Title
    • Site Description (Tagline)
    • Menu Items (applies to horizontal and side menu)
  4. Sliders and Featured Pages
    • Slider title
    • Slider Text
    • Slider button
    • Featured pages title
    • Featured pages text
    • Featured pages button
  5. Posts / Pages
    • Single post/page titles
    • Post list titles
    • Archive/Blog titles
    • Post content/excerpt
    • Post metas
    • Links in post/pages
    • H1 to H6 headings
    • Blockquotes
  6. Comments
    • Comments title
    • Comments author
    • Comments content
  7. Sidebars
    • Sidebar widget titles
    • Links in sidebars
  8. Footer
    • Widget titles
    • Footer credits

Selecting A Text To Style

All the 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.

For this example we will select the Site Title to style.

  1. Login to your WordPress admin -> Appearance -> Customize -> Font Customizer -> Header -> Site title
  2. You should see 3 sections. We will explain these 3 sections in more details in Settings Overview.
    • Font Family
    • Font Style
    • Other settings
  3. For example, click on Font family drop down and select - Impact, Charcoal, sans serif. Look at the preview panel on the right hand side and you will see the font family Impact, Charcoal, sans serif, taking effect on the Site Title.

  4. Go through all settings to try them out.

Reset Your Selection

  1. You will notice that there is a small reset button appearing next to the option. You can click on this to reset your selection.

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. Subset
    • Click on the drop down to select the subset.
    • Choose only the characters that you need to reduce loading time.
    • If you are uncertain, you can choose "All subsets".
  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.

Custom Controls

If there is any element that you want to style but is not available in the standard controls, you can use a Custom Control.
In this example, we will style the "Older Posts" link.

  1. Click on Add a new control button.

  2. Enter a Name, we will name it Older Posts Link.
  3. Enter the CSS selector, in this case, it's .nav-previous a
  4. You can assign it to any Group, for this example, we will keep this under Custom controls
  5. This is what you should have now.

  6. Click on Add button, and wait for page to reload.
  7. Navigate back to Font Customizer -> Custom Control.
  8. You will see your newly added Older Posts Link setting.

  9. Now click on the Older Posts Link control that you have created, it will reveal the settings panel.

  10. Now, we will style it with Font family - Dancing script regular, Apply an effect - 3D two, some colors...
  11. That's all, we have managed to style the Older Posts Link!
  12. See screenshot before styling.

  13. See screenshot after styling.

That's all for this documentation.

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.