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. It's also available as a stand alone plugin ( WordPress Font Customizer Plugin), for use in other themes. 

This documentation is for WordPress Font Customizer Plugin. In this example, we will be using the plugin with Twenty Thirteen Theme.

Installation

  1.  In Twenty Thirteen Theme Installation ( it could be any other WordPress theme )
    • Log in to WordPress Admin -> Plugins -> Add New, and click on Upload Plugin button.
    • Click on Browse(1) and find wordpress-font-customizer.zip, select and click on Install Now button (2)
    • Click on Activate Plugin link.
    • You have done installing the plugin in your Twenty Thirteen Theme Installation.

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 font (body) - the font for the whole site.
  3. Headings
    • H1 to H6 headings - HTML h1 to h6 tags
  4. Blockquotes

  5. Links - HTML a tags

  6. Paragraphs - HTML p tags

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. On your Font Customizer, click on Paragraphs -> paragraphs (p)
  2. Style the font family by clicking on the drop down, we select Impact, Charcoal, sans serif for this example.
  3. 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.

  6. You can try out the remaining settings.
  7. Now you may want to change the font of the post title and found that it's a link using a tag, but styling the Font Customizr -> Link (a) affects all the links on the site. This is not what you wanted. For situations like this, you will need to use the Custom Controls, and we will talk about this later.

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

In the previous section Selecting A Text To Style, we have mentioned that certain elements such as the post title of Twenty Thirteen Theme, is unable to style without affecting the links. In this case, we need to create a Custom Control.

We will use the above mentioned scenario as an example.

  1. Click on Add a new control button.

  2. Enter a Name, we will name it Post Title.
  3. Enter the CSS selector, in this case, it's .entry-title 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 Post Title setting.

  9. Now click on the Post Title 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 Post Title of Twenty Thirteen Theme!
  12. See screenshot before customizing.

  13. See screenshot after customizing.

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.