First Steps: CSS Selectors & Their Properties
All the plugin's settings are available in WordPress Customizer. This allows you to view the changes right away without refreshing pages.
You can access Customizer in two ways:
1. In WordPress admin panel go to Appearance – Customize
2. On your website’s admin bar click on the “Customize” button
In Customizer you will find a panel called “Font I Want”. Please, click on it.
Default CSS selectors in the standalone plugin
If you buy the plugin as a standalone product on Codecanyon, the 'Font I Want' panel will contain two sections: "Default" and "Custom".
Under the "Default" section you’ll find a list of prebuilt CSS selectors that you can configure right away. Note: you cannot delete them.
Under the "Custom" section you’ll be able to create/delete your own CSS selectors.
Default CSS selectors in supported themes
If your theme officially supports Font I Want, it may change the list of default CSS selectors by completely hiding the 'Default' section and/or adding new theme specific sections. Please, refer to the theme's official documentation to view the changes.
If you're using Smoothly, please, view the following documentation.
How to create/delete a Custom CSS selector
To create a new CSS selector, please, go to the "Custom" section and press the "Add" button.
In the Properties window type the description and the CSS selector itself.
Now you’re ready to change its properties.
Don’t forget to press the “Save & publish” button in Customizer, otherwise, WordPress won’t save the newly created CSS selector at all.
To delete any Custom CSS selector, please, press the “X” button, then the “Save & publish” button in Customizer.
Working with Properties
In order to define/change a CSS selector's properties, please, click either on the CSS selector’s description (for example, Body) or on the “Settings” button (located on the right).
Note: in the content below we'll use screenshots from the Smoothly WordPress theme CSS selectors' list.
The Properties window will appear.
You can define/change the following properties:
- Font family
- Font style
- Text color
- Font size
- Line height
- Letter spacing
- Word spacing
- Text decoration
- Text transformation
- Font variant
- Background color
How to change Font family
To change a CSS selector’s font family, press the “Select font” button.
You will see a list of Favorite fonts containing several Google Fonts by default. Just select the font you need.
If you need to modify the font list, please, follow this manual.
How to change Font style
The font style selector is located below the font family button.
If you haven't chosen any font family, you'll be shown a list of 18 font styles.
If a Typekit's font is chosen, the list will contain all the font styles but some of them may disabled. You can enable them only on Adobe Typekit's website. You can read more about Typekit here.
If you choose a font from any other provider (including your own custom font), the list will contain only the styles available within the font.
Just play with the other properties to change the look of your website’s texts.
When you finish your modifications, don’t forget to press the “Save & publish” button in Customizer.
How to change properties on different breakpoints
A Properties window contain a 'Breakpoints' panel, in which you can define different properties for each screen size separately.
There are 5 available brealpoints:
- Desktops (default)
- Landscape phones
- Portrait phones
By default, all properties on smaller screen sizes are inherited from the bigger ones. For example, portrait phones font family is inherited from Landscape phones.
Just switch between the breakpoints and change any properties you need (you can even display different font families on different breakpoints).
By the way, there is no need to change ALL properties on all breakpoints: in reality you just play with font size and line height.