Font I Want - Font Management and Typography WordPress Plugin

Contents

1. Changelog

2. Font I Want Overview

3. Requirements and Compatibility

4. Installation and Update

5. First Steps: CSS Selectors & Their Properties

6. Favorite Fonts & Font Library Overview

7. Google Fonts: Automatic Updates

8. Adobe Typekit: Authorization, Kits & Important Notes

9. Custom fonts: Font Upload

10. Tips and Tricks

1. Changelog

Version 1.3.4 — July 27, 2017

Version 1.3.3 — June 8, 2017

Version 1.3.2 — May 11, 2017

Version 1.3.1 — May 2, 2017

Version 1.3.0 — March 7, 2017

Version 1.2.0 — January 25, 2017

Version 1.1.3 — January 9, 2017

Version 1.1.2 — December 19, 2016

Version 1.1.1 — December 10, 2016

Version 1.1.0 — November 2, 2016

Version 1.0.3 — July 15, 2016

Version 1.0.2 — July 14, 2016

Version 1.0.1 — July 10, 2016

2. Font I Want Overview

Font I Want is the most powerful and user friendly Typography WordPress plugin available on the market today.

It allows website owners to express their brand's personality by doing the following:

  1. Loading fonts from 3 most popular font providers - Google FontsAdobe Typekit (requires an active Typekit's account), and Font Squirrel.
  2. Uploading custom fonts by simply dragging all the fonts' files from one's desktop.
  3. Browsing fonts in the most beautiful font Library on the market. Searching, filtering and adding fonts to Favorites for time saving purposes.
  4. Working with predefined or custom CSS selectors (like body, headings, and many more), controlling their numerous properties (like font family, style, color, weight, etc.), and combining fonts from different providers.
  5. Fine tuning all properties on 5 separate breakpoints (desktops, laptops, tablets, landscape phones, and portrait phones).

In addition, Font I Want allows WordPress developers to create product specific CSS selectors to let their users put the products' Typography options to the next level.

3. Requirements and Compatibility

Font I Want is one of the first WordPress plugins built on top of WordPress REST API on the backend and Angular 2 on the frontend.

These technologies allow us, the plugin developers, to create unique, modern and feature-rich products with possibilities that couldn’t be accomplished before.

In order to activate and use the plugin, make sure your web host meets the following server requirements:

  1. WordPress 4.4 or greater
  2. PHP version 5.4 or greater

In order to use this plugin as a WordPress administrator, make sure you’re running one of the following browsers:

  1. Chrome 46 or greater (recommended)
  2. Firefox 42 or greater
  3. IE 10 or greater (not recommended)
  4. Edge
  5. Safari 7 or greater

This plugin works with any WordPress theme, and there are no specific browser requirements for your website visitors (it all depends on the theme you’re using).

4. Installation and Update

You can install the plugin automatically or manually. However, depending on the way you've acquired the plugin (whether you've bought it as a standalone product or within a theme's package), there are different options for its automatic installation and update. 

Important note

Font I Want works via WordPress REST API which requires pretty permalinks. Therefore, before the plugin's installation, please, do the following:

1. Go to 'Settings - Permalinks'

2. Choose any permalink structure (except 'Plain') and press the blue 'Save Changes' button.

Automatic installation (recommended)

If you buy the plugin as a standalone product, the easiest way to install (and later update) it is to use the following plugin from Envato. Just download the Envato's plugin and follow its official installation guide.

If the plugin is included into a theme's package (for example, in Seriously) and it is one of the theme's recommended plugins, you can install it by visiting Appearance - Install plugins right after the theme's activation.

Manual installation

There are two ways to install the plugin manually:

  1. WordPress Administration Panel Upload;
  2. FTP Upload.

To install the plugin, you must first upload the plugin files via one of the installation methods and then activate the plugin itself.

WordPress Administration Panel Upload (recommended)

Step 1: Navigate to Plugins* in your WordPress administration panel. (*See below for WPMU users).

Step 2: Click the Add New button at the top of the page.

Step 3: Click the Upload Plugin button that replaced Add New button.

Step 4: Select the plugin .zip file you downloaded from Codecanyon or from the theme's package (depending on the way you've acquired the plugin) and click Install Now.

Step 5: In Plugins list find the plugin and click Activate.

*If you have WMPU plugin installed, Navigate to My Sites (top left corner in your WordPress administration panel) Network Admin > Plugins.

WPMU users please be warned that according to Envato’s policy on Extended license (section 5) you must purchase Extended License of the plugin to use legally within your network.


FTP Upload (alternative)

Step 1: Connect to your website host using your FTP client (for example, FileZilla).

Step 2: Go to your default WordPress plugins folder (/wp-content/plugins/) and upload the non-zipped plugin folder into that folder (/wp-content/plugins/).

Step 3: Navigate to Plugins in your WordPress administration panel and click Activate (the uploaded plugin) once the upload has finished.


Automatic update (recommended) 

If you buy the plugin as a standalone product, we'd recommend you to use Envato Market WordPress plugin which will automatically keep track of which plugins require an update and will update them for you.

If the plugin is included into a theme's package, please, update the theme first and then go to Appearance - Install plugins where you can update it.

Manual update via FTP (alternative)

Step 1: Re-download the plugin from your Codecanyon account or from the theme's package (depending on the way you've acquired it).

Step 2: Deactivate the plugin in WordPress admin panel.

Step 3: Connect to your website host using your FTP client (for example, FileZilla).

Step 4: Go to your default WordPress plugins folder (/wp-content/plugins/) and upload the non-zipped plugin folder into that folder (/wp-content/plugins/) rewriting the previously uploaded files.

Step 5: Activate the plugin in WordPress admin panel.

5. First Steps: CSS Selectors & Their Properties

Plugin's settings

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:

  1. Font family
  2. Font style
  3. Text color
  4. Font size
  5. Line height
  6. Letter spacing
  7. Word spacing
  8. Text decoration
  9. Text transformation
  10. Font variant
  11. 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:

  1. Desktops (default)
  2. Laptops
  3. Tablets
  4. Landscape phones
  5. 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.

6. Favorite Fonts & Font Library Overview

Favorite fonts overview

There are a lot of WordPress themes and plugins with typography options. But all of them share one UI mistake: they show you all integrated fonts, whereas you need just a couple them. So you have to spend a lot of time searching for the font you want each time you need it.

Therefore, we came up with 'Favorites': you just add the fonts you want, and only these fonts will be displayed to you when you choose font families and styles.

So, in order to view Favorite fonts, go to Appearance - Customize - Font I Want - any section (like 'Basic Typography') and press a 'Properties' button.


By default, the Favorite fonts list contains several fonts from Google Fonts.


if you position the mouse pointer over a font name, you will see a 'Delete' button on the left (so you'll able to delete the font from Favorites) and the font provider icon on the right.

If you need to broaden the list by fonts from Google Fonts, Adobe Typekit or Font Squirrel, just press the 'Library' button.

Font Library overview

The Font Library is the easiest way to browse all available fonts and add some of them into Favorites.

All fonts are grouped by the font providers. By default, Google Fonts is chosen but you can easily switch to another provider in the upper right corner of the Library window.

Depending on the chosen font provider, the Library will contain different options. Therefore, let's review each of them separately.

How to add Google Fonts to Favorites

On the left, you can see the list of all available fonts from Google. Each row contains a quick font view (you can even type your own text to preview it), the font name and the number of available styles.

You can scroll through the font list or use the search field on the right to find the exact font you want. In addition, you can filter the font list by family and languages.

To add the font to Favorites, just position the mouse pointer over the font name and press the round green "+" button, and the font will be displayed in your Favorites right away.

To delete the font, just press the "-" button (which is located in the same place).

Search the other fonts you need and add them into Favorites. When you finish, press the blue 'Save & Publish' button in Customizer.

How to add Adobe Typekit fonts to Favorites

Before adding Adobe Typekit's fonts into Favorites you need to make sure there's at least one created kit (with the fonts you need) available in your Typekit's account. In addition, you need to connect Font I Want to your Typekit's account via its API token. Please, read more about it here.

After you create a kit and connect Font I Want to Typekit, please, switch to 'Typekit' in the Font Library. You will see a list of all available kits. Enable the kit you need by pressing the toggle. After it you'll be able to scroll through the font list and use the filter by font style and weight.

To add a font to Favorites, just position the mouse pointer over its name and press the round green "+" button, and the font will be displayed in your Favorites right away (please, do it for all the kit's fonts you need).

After you add the fonts to Favorites, press the 'Save & publish' button in Customizer.

How to add Font Squirrel fonts to Favorites

You can scroll through the font list or use the search field on the right to find the exact font you want. In addition, you can filter the font list by classification.

In each row, you can find the font information which includes the following:

  1. The main font name (for example, '3Dumb');
  2. Its classification ('Novelty');
  3. The number of available styles (actually, this is the number of all the fonts available within this font package which we'll explain below).

When you press the round green "+" button, 2 things happen:

  1. The whole font package is downloaded onto your server;
  2. The main font ('3Dumb')is automatically added into your Favorites.

Now, let's press the 'My' link on the left. You will see 2 fonts available within this font package.

If you want to add the other font ('2Dumb') to your Favorites, please, press the round green "+" button.

If you want to remove the fonts from Favorites, use the green "-" button.

However, removing Font Squirrel fonts from Favorites doesn't delete the font files from your server. In order to do it, use the gree 'delete' links.

The whole process seems to be a bit strange but that's the way how Font Squirrel API works.

How to add Custom fonts to Favorites

Before adding custom fonts to Favorites, you need to upload them first. Please, read this brief manual on how to accomplish it.

To add a font to Favorites, just position the mouse pointer over its name and press the round green "+" button, and the font will be displayed in your Favorites right away.

To delete the font files completely from your server, use the green 'delete' link.

7. Google Fonts: Automatic Updates

In July 2017 Google Fonts provided 821 font families. Even though we constantly update Google Fonts library, you can update it automatically by specifying Google Fonts API key.

Before you begin

Before updating the Google Fonts library, please, do the following:

Go to the Google Fonts website and check the number of available font families

Then check the number of fonts available in the plugin. 

Specify your Google Fonts API key

If you think your Google Fonts library is out of date, you can update it by pressing the “Update” button on the right.

You will be asked to enter a Google Fonts API key. When you specify the key, just press the green “Update” button and wait for a few seconds.

Please, note, if you create a new Google fonts API key, it may take up to 5 minutes for Google to make it active.

If the update is finished but the number of fonts has not been changed, don’t worry, it means Google hasn’t made the new fonts available for its API. Just wait for a few days, and repeat the procedure.

8. Adobe Typekit: Authorization, Kits & Important Notes

Font I Want allows you to easily work with Adobe Typekit (which is a paid service) without the need to copy and paste any javascript code into your website: you just need to connect Font I Want with your Typekit's account, and you'll be able to browse all your fonts (stored in kits) and add some (or all) of them into Favorites.

Before adding any fonts into Favorites you need to do the following:

  1. Make sure you've got at least one active kit (with added fonts) on Adobe Typekit's website;
  2. Connect Font I Want to Adobe Typekit by specifying its API Token.

Working with kits

Adobe Typekit stores all your web fonts in kits. If you're sure there's at least one previously created kit with the fonts you want to use on your website, you can skip this section.

For those, who want to add new fonts to any existing kits or create a new kit from scratch, let's go to Adobe Typekit's website and sign into your account. 

In the search field (on the left) type the font you need and go to its page.

Now you need to add the font to a kit by pressing the green 'Add to kit' button.

In the next window you'll be asked to add the font to an existing kit or create a new kit (just choose the option you prefer).

In the next window check all the font weights and styles required by the demo and press the green 'Publish' button.

Find the other fonts you need and add them to the same kit.

Connect Font I Want to Adobe Typekit

Now let's find an API Token to connect Font I Want to Adobe Typekit by pressing the 'Account' link (right upper corner). On the next page press the small green 'manage' button (at the bottom).

On the next page copy one of the previously created API Tokens or create a new one.

Next, go to the Font Library and press the 'Typekit' link. Then paste the previously copied API Token and press the green button.


When the authorization process is over, you will see a list of all available kits. Enable the kit you need by pressing the toggle.

Now, you can add any fonts from the kit to your Favorites by pressing the green '+' button (please, do it for all the kit's fonts you need).

After you add the fonts to Favorites, press the 'Save & publish' button in Customizer.

Important notes

  1. If you haven't previously defined the domain in the kit, it may take several minutes for Typekit to apply the kit to this domain.
  2. When you activate a kit for a domain, Typekit loads ALL the kit's fonts and font styles onto your website. Please, make sure the kit consists of the fonts and font styles that you really need. Otherwise, your website's pages may load slowly.
  3. If you activate several kits for a domain and add fonts to your Favorites from many of them, Typekit will load all the kits' fonts onto your website. Therefore, we strongly recommend you to use only one kit per a domain.

How to activate a kit for a domain?

There are two options:

  1. You can specify the domain (even localhost) on Typekit's website (in the Kit's Settings) or
  2. Just activate the kit in Font I Want, and the plugin adds the domain to the kit automatically.

Note: when you deactivate a kit, the plugin removes the domain from the kit. But its fonts (that have been previously added to Favorites) will remain in your Favorites. If you don't need them anymore in Favorites, please, remove them manually.

What if a font is available in several kits?

Don't worry. If you add a font from one kit and then decide to delete/deactivate the kit, just add the font from the other kit, and the plugin automatically switches the kits.

9. Custom fonts: Font Upload

Font I Want provides the easiest font upload experience: you just need to drag ALL your font files into it, and the plugin will automatically sort all the files automatically.

In order to upload your custom fonts, please, press either the 'Upload' button in the Favorites or the 'Uploaded' link in the Font Library.

You can drag and drop the font files from your desktop to the upload section or click on it to choose the font files.

When the upload process is finished, you can add the fonts to your Favorites.

To delete the font files completely from your server, use the green 'delete' link.

10. Tips and Tricks

The green dot will save your time

Starting from version 1.3, all CSS selectors with previously defined properties are marked by a green 'dot'. This tiny UI feature will save you a lot of time when you need to navigate throughout all your CSS selectors.

The same UI feature is used in the 'Breakpoints' panel as well.

Use the 'Clear' button if you change your mind

If you define many properties (on one or several breakpoints) but don't want to save them, just press the 'Clear' button which delete all your selections within the opened Properties window.

Fast switching between CSS selectors

If you need to switch between several CSS selectors within one section (for example, between 'Heading 1' and 'Heading 3'), there's no need to use the 'Close' button: just press another CSS selector's name (for example, 'Heading 3') and start working with its properties right away.

Make it !important

If you change a CSS selector's property but it's not applied, try to check the 'Force this rule' button to declare the rule as !important.