Wordpress Font Customizer documentation

The WordPress Font Customizer is a professional web design solution to customize any text of your WordPress theme. Take full control of your fonts in any WordPress themes with a beautiful and powerful live preview user interface.

Introduction

The WordPress Font Customizer is included as a built-in feature in  Customizr Pro Theme 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 To Style

This plugin which is designed to work on all themes, uses HTML elements as names for it's settings, such as Blockquote, H1, Links (a), etc.
For this example, we will be looking at how to style the post content on front page of Twenty Thirteen Theme.

  1. Open the Font Customizer, click on Add New

  2. Pick a predefined text element or select "Custom" at the bottom to use a custom css selector for a text element in your page

  3. Change any property like the font family or the font size, and you will be able to see the post content's font changed immediately.

  4. On the top left corner of your viewport, click on Save and Publish button to publish your changes.
  5. This is how it will look on your front end.

Remove Your Customization

  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 and language

  1. Languages
    • Click on the drop down to narrow down the fonts to a specific group of languages
    • 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.

Disabling the Font Customizer

You can check the option at the bottom to deactivate the feature. It will remove all requests to CSS and JS assets used to display Google fonts.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.