# Introduction Fonts Plugin is the number one [Google Fonts Plugin for WordPress](https://fontsplugin.com). It has been downloaded over 1,500,000 times and is active on 100,000+ websites. Within minutes you can transform the typography of your website using the easy-to-use interface. Fonts can be set globally across your entire website, or for maximum control you can customize each line of text individually. Fonts Plugin works with both the [Classic Editor](/classic-editor/getting-started) and [Gutenberg (Block Editor)](https://docs.fontsplugin.com/gutenberg/getting-started). For users that require fonts that are not included in the Google Fonts library, support for [Custom Font Uploads](https://docs.fontsplugin.com/custom-font-uploads/custom-font-uploads) and [Adobe Fonts](https://docs.fontsplugin.com/integrations/adobe-fonts) is included. # Installation Download the Pro version from your [account](https://fontsplugin.com/account/) page to your computer. Navigate to `Plugins` → `New`. Click `Upload Plugin`. Choose the `fonts-plugin-pro.zip` file you just downloaded. Then click `Activate Plugin` The installation is now complete. 🥳 There are three ways to use Fonts Plugin * [Sitewide](/basic-settings/base-typography) * [Classic Editor](/classic-editor/getting-started) * [Gutenberg](/gutenberg/getting-started) # Developers Fonts Plugin is open-source `(GPL v2)` and anyone is welcome to contribute. There are multiple ways to get involved: * **Developer Contributions** - * **Documentation Improvements** - * **Translations** - # Optimization Panel The Optimization panel consists of five controls that make a huge difference to your page load speed. Located at `Appearance` → `Customize` → `Fonts Plugin` → `Optimization`. ### Host Fonts Locally The local hosting feature allows you to host the fonts from your own server instead of Google’s. As well as being GDPR-friendly, this can also have performance benefits. Enabling local hosting is a simple 1-click process. Simply toggle the checkbox to the `on` position. Press `Publish` and the plugin will do all the work in the background. Font Files are cached on your server for **1 year** and they are regenerated each time you change fonts. If you need to re-generate the font files manually that is also possible: Navigate to \&#xNAN;*(replace yourwebsite.com with your own URL)* ### Use WOFF2 File Format By default Fonts Plugin uses the WOFF file format as it has the [highest compatibility across all browsers](https://caniuse.com/#search=woff). However, there is a more optimized file format that all modern browsers support, [WOFF2](https://caniuse.com/woff2). In our testing it reduces all font file sizes by at least 30%. To enable WOFF2, toggle the switch: You will then need to clear your font cache by navigating to \&#xNAN;*(replace yourwebsite.com with your own URL)* ### Enable Preloading Preload Resource Hints are a browser feature that allows your website to specify the resources it needs to render the page. With preloading enabled, the browser knows that it needs to download the fonts as soon as possible, this ensures your text renders as quickly as possible and that there is no [flash of unstyled text](https://fonts.google.com/knowledge/glossary/fout). ### Remove External Fonts Fonts Plugin Pro loads your fonts in the most optimized way possible. For that reason you don't want to also have your theme and plugins also loading fonts in an unoptimized way. Enabling this setting removes all font references that aren't from Fonts Plugin Pro. ### Rewrite External Fonts If you want to continue using the fonts supplied by your theme or plugins, the most optimal way is to enable the 'Remove External Fonts' setting and then add your fonts using the [Load Fonts Only](https://docs.fontsplugin.com/advanced-settings/load-fonts-only) feature. However, if you are short on time and are looking for an instant solution, enabling this option will rewrite all your fonts to be hosted locally. This has the benefit of improving pagespeed and protecting your website visitors privacy, as it removes the connect to the Google Fonts API. # Font Loading The Font Loading feature is located at `Fonts Plugin` → `Font Loading`. It’s extremely simply to use, simply untick any font weights you don’t need. Then press `Publish`. ![](https://fontsplugin.com/wp-content/uploads/2018/12/image-474x1024.png) Each font weight you remove can save a considerable amount of `kbs`. Most websites don’t use `Extra Light` or `Ultra Bold`, so they are great candidates for removal. # Base Typography `Appearance` → `Customize`→ `Fonts Plugin` → `Basic Settings` The Base Typography control allows you to change the typography of your entire website in as little as two clicks. ![](/files/-Lkcoi5PgIDn1O-I3zR2) ### Size, Weight, Color and Line Height Clicking the blue icon to the right of the ‘Font Family’ control will reveal additional typography controls: Font weight, style, size, color and line-height settings. ![Font weight, style, size, color and line-height settings.](https://fontsplugin.com/wp-content/uploads/2019/04/reveal-settings.png) {% hint style="info" %} If your changes aren’t taking effect, you may need to enable the [‘Force Styles’ setting](/debugging/force-styles-setting). {% endhint %} The following CSS selectors are targeted: ```css body, #content, .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .widget-area, .widget, .sidebar, #sidebar, footer, .footer, #footer, .site-footer ``` # Headings Typography `Appearance` → `Customize`→ `Fonts Plugin` → `Basic Settings` The 'Headings Typography' control doesn't have a font size control as it modifies **all** heading types. ![](/files/-LkclJGrLj4Bw-XMPtvn) Clicking the blue icon to the left of the ‘Font Family’ will reveal additional typography controls: Font weight, style, size, color and line-height settings. {% hint style="info" %} If your changes aren’t taking effect, you may need to enable the [‘Force Styles’ setting](/debugging/force-styles-setting). {% endhint %} The following CSS selectors are targeted: ``` #site-title, .site-title, #site-title a, .site-title a, .entry-title, .entry-title a, h1, h2, h3, h4, h5, h6, .widget-title ``` # Buttons and Inputs Typography `Appearance` → `Customize`→ `Fonts Plugin` → `Basic Settings` The Buttons and Inputs control allows you to customize the typography of the following: * Buttons * Inputs * Search Fields * Form Fields ![](/files/-LkclOHzoSsiMpBg4_YG) The following CSS selectors are targeted: ``` button, input, select, textarea ``` # Branding `Appearance` → `Customize`→ `Fonts Plugin` → `Advanced Settings` → `Branding` The branding section consists of two controls: **Site Title Typography** The following CSS selectors are targeted: ``` #site-title, .site-title, #site-title a, .site-title a, #logo, #logo a, .logo, .logo a ``` **Site Description Typography** The following CSS selectors are targeted: ``` #site-description, .site-description, #site-tagline, .site-tagline, .wp-block-site-tagline#site-description, .site-description, #site-tagline, .site-tagline, .wp-block-site-tagline ``` # Navigation `Appearance` → `Customize`→ `Fonts Plugin` → `Advanced Settings` → `Navigation` The branding section consists of one control: **Navigation Typography** The following CSS selectors are targeted: ``` .menu, .page_item a, .menu-item a, .wp-block-navigation, .wp-block-navigation-item__content ``` # Content `Appearance` → `Customize`→ `Fonts Plugin` → `Advanced Settings` → `Content` The **content** section consists of seven controls: **Content Typography** The following CSS selectors are targeted: ``` .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt ``` **Title and H1 Typography** The following CSS selectors are targeted: ``` .entry-title, .entry-title a, .post-title, .post-title a, .page-title, .entry-content h1, #content h1 ``` **H2 Typography** The following CSS selectors are targeted: ``` .entry-content h2, .post-content h2, .page-content h2, #content h2 ``` **H3 Typography** The following CSS selectors are targeted: ``` .entry-content h3, .post-content h3, .page-content h3, #content h3 ``` **H4 Typography** The following CSS selectors are targeted: ``` .entry-content h4, .post-content h4, .page-content h4, #content h4 ``` **H5 Typography** The following CSS selectors are targeted: ``` .entry-content h5, .post-content h5, .page-content h5, #content h5 ``` **H6 Typography** The following CSS selectors are targeted: ``` .entry-content h6, .post-content h6, .page-content h6, #content h6 ``` # Sidebar `Appearance` → `Customize`→ `Fonts Plugin` → `Advanced Settings` → `Sidebar` The **sidebar** section consists of two controls: **Headings Typography** The following CSS selectors are targeted: ``` .widget-title, .widget-area h1, .widget-area h2, .widget-area h3, .widget-area h4, .widget-area h5, .widget-area h6, #secondary h1, #secondary h2, #secondary h3, #secondary h4, #secondary h5, #secondary h6Content Typography ``` The following CSS selectors are targeted: ``` .widget-area, .widget, .sidebar, #sidebar, #secondary ``` # Footer `Appearance` → `Customize` → `Fonts Plugin` → `Advanced Settings` → `Footer` The **footer** section consists of two controls: **Headings Typography** The following CSS selectors are targeted: ``` footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 ``` **Content Typography** The following CSS selectors are targeted: ``` footer, #footer, .footer, .site-footer ``` # Load Fonts Only `Appearance` → `Customize`→ `Fonts Plugin` → `Advanced Settings` → `Load Fonts Only` The Load Fonts Only control enqeues the selected fonts without automatically applying them to an element. This is useful if you are adding your own customizations using CSS. This control is also use in the [Block Editor](/gutenberg/getting-started) and [Classic Editor](/classic-editor/getting-started) integrations. ![](/files/-LkdClPSNX_DuTHfoSoU) # Custom Elements `Appearance` → `Customize`→ `Fonts Plugin` → `Custom Elements` Custom Elements allow you to build Typography settings for any element on your website. Custom Elements can be created under `Google Fonts` → `Custom Elements`. **Before creating Custom Elements it's important that you save any other changes you have made in the Customizer.** This is because when you press 'Save Changes' to generate the Custom Elements controls, the Customizer will refresh and lose any unsaved settings. ![](https://fontsplugin.com/wp-content/uploads/2018/12/google-fonts-custom-element.png) The `Selectors` field accepts any valid [CSS Selectors.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors) That means there is no element on your website that is off-limits. A Selector can target a single element, or multiple elements separated by commas. For example: ```css .widget-title, #form, table, h1 ``` Once you have created your Custom Elements. Press `Save Changes`. You will then be able to customize your Elements under `Google Fonts` → `Advanced Settings` → `Custom Elements`. ![](/files/-MAQUN46UK2U2ixcvrTp) **Further Reading:** [How to Find CSS Selectors](https://fontsplugin.com/how-to-find-css-selectors/) # Getting Started To use Google Fonts in the 'Classic Editor', you must first tell the plugin which fonts you want to use. * In wp-admin, navigate to `Appearance` → `Customize` * Click `Fonts Plugin` → `Advanced Settings` → `Load Fonts Only` * Add the fonts you want to use * Click `Publish` ![](/files/-LkVHZyEWATRRO7rb3V5) Once you have completed the above steps, your chosen fonts will now be available in the Classic Editor interface: ![](/files/-LkcxbwvBIHUdCAdSU_U) # Getting Started Fonts Plugin has native support the new Block Editor (Gutenberg). If your theme has built in support for fonts, you will see a 'Font' control when a paragraph or heading is selected:
Follow the relevant links to add [Google Fonts](/advanced-settings/load-fonts-only), [Adobe Fonts](/integrations/adobe-fonts) and [Custom Uploads](/custom-font-uploads/custom-font-uploads) to the dropdown list. If your theme doesn't support fonts natively, you can still use our Fonts Block. #### Google Fonts block Simply add a new block and search for `fonts` or `google fonts`: ![](/files/-LkcruoGoxNr0ychWiF2) The Google Fonts block has the following attributes: * Block Type (Paragraph, H1, H2, H3, H4, H5, H6) * Font (900+ Google Fonts) * Variants * Font Size (px) * Line Height * Color * Alignment (Left, Right, Center) ![](/files/-LkcsPmXlM8Z_UAk_CdW) Regular paragraphs and heading blocks can also be [transformed](/gutenberg/transformations) into Google Font blocks. # Transformations Block Transformations allow you to transform regular paragraphs and headings into fully-customizable Google Font blocks. When editing a paragraph or heading block, simply click the first icon. The editor will reveal a list of possible transformations. Choose 'Google Fonts'. ![](/files/-LkctunVZMuCqe8LI4No) Initially your content will look the same. However, you will now have access to the Font Settings sidebar. ![](/files/-LkcuDr8k1-Kgj77CtmP) # Custom Font Uploads How to upload font files from your device and use them in WordPress Click on *Fonts Plugin →* *Upload Fonts* in the admin sidebar.
On the *Upload Fonts* screen you will be able to name and upload your font files. For the font to display correctly you only need to upload one type of font file, we recommend the .woff2 format as it has the smallest file size. **Name & Font Family** If your font is split into multiple files, for example: *OpenSans-Regular.woff2* and *OpenSans-Bold.woff2* then you will need to enter a consistent **Font Family** value for each variant. This ensures that all variants are linked in the backend. If the font you are adding only has one file, you don't need to enter a **Font Family** value. In this example we are adding the Regular variant of the Roboto font:

The name should be a unique value, so we can find the variant later if needed. So we have named it Roboto 400 for simplicity.

Once you have pressed the 'Add New Font' button, your font is now ready to use. It can be used in the Customizer, Block Editor (Gutenberg) or the Classic Editor #### Customizer The Customizer is used to configure the typography of your entire website at once. From within wp-admin, navigate to Fonts Plugin → Customize Fonts → Basic Settings
Choose your font from the dropdown list and the change will be reflected instantly. You can also change the typography of specific elements by exploring the 'Advanced Settings'. Clicking the blue icon to the right of the ‘Font Family’ control will reveal additional typography controls #### Block Editor To use your new font on a single paragraph or heading in the block editor, first create your content. Next, while focusing on the block, click the first icon (Transform). The editor will reveal a list of possible transformations. Choose 'Fonts Plugin'. Initially your content will look the same. However, you will now have access to the 'Fonts Plugin' sidebar where you can choose your new font:

Click 'Fonts Plugin' to transform the block.

#### Classic Editor To use your new font in the classic editor, first create your content. Next, highlight your content and click the Font Family dropdown. Your new font should be near the top of the list.
### How to Optimize Custom Fonts When fully optimized, uploaded fonts don't add a large amount of weight to your page (30-50kb per variant) and shouldn't noticeably slow down your website. Here are the best ways to do that: #### 1. **Limit the Font Variants** There are 18 possible variants, as seen in the table below. Not all fonts support all 18, but if they do, it doesn't necessarily mean you need to upload them all. | Thin (100) | Thin Italic | | ----------------- | ------------------ | | Extra Light (200) | Extra Light Italic | | Light (300) | Light Italic | | Normal (400) | Normal Italic | | Medium (500) | Medium Italic | | Semi Bold (600) | Semi Bold Italic | | Bold (700) | Bold Italic | | Extra Bold (800) | Extra Bold Italic | | Black (900) | Black Italic | Only upload the variants that are used in your design and content. In many cases this may only be four: Normal, Normal Italic, Bold and Bold italic. #### 2. Preload the Fonts Preloading is an optimization technique supported by all the major web browsers. It's a line of code on your website that signals to the browser that your website uses a custom font and it needs to be download immediately to reduce the chance of a FOUT (Flash of Unstyled Text). Preloading is a [Fonts Plugin Pro](https://fontsplugin.com/pro-upgrade) feature and is automatically enabled for custom font uploads in the .woff and .woff2 formats. However you can also disable preloading for individual variants by unchecking the feature
#### 3. Use Optimized Formats The format of the font files can have a huge effect on the font size. Here is a comparison of Roboto (regular) in different formats: * TTF - 168kb * WOFF - 26kb * WOFF2 - 19kb All modern browsers support both WOFF and WOFF2 format, so we highly recommend using those. If your fonts are not already in either of those formats, you can use the [Web Font Generator](https://www.fontsquirrel.com/tools/webfont-generator) to convert them. #### 4. Local Hosting Local hosting is when the font files are hosted and served from your own domain, and is the most efficient way to add fonts to your website. Using Fonts Plugin to add fonts to your website ensures your fonts are locally hosted automatically. # Reset All Fonts This action can be not reversed. Sometimes you need to start again from a blank slate, that's what the 'Reset All Fonts' button does.
# Force Styles Setting The `Force Styles` setting is located at `Fonts Plugin` → `Debugging`. ![](https://fontsplugin.com/wp-content/uploads/2018/12/google-fonts-force-styles.png) In some cases, Fonts Plugin can’t overwrite the theme-defined fonts on the frontend of your website. Enabling this setting defines the fonts using a stronger method. {% hint style="info" %} Technical note: This setting applies the CSS !important rule to all font settings. {% endhint %} # CSS Font Display The Font Display setting controls what happens while a font is loading. There are four options, and **swap** is the default. ![](/files/-MJSXJVyjNUUxD1ZsB9m) **Block** The browser will show invisible text for up to 3 seconds, it will then display the Google Font if it has downloaded. **Swap** The browser will initially show a system font, then once the Google Font has downloaded it will swap the fonts. **Fallback** The browser will initially show a fallback font. If the Google Font is downloaded within 3 seconds it will swap the fonts. If the Google Font can’t download in 3 seconds or less it will continue using the fallback. **Optional** This mode is very similar to fallback, except the wait time is a lot lower. If a font hasn’t downloaded within 100ms the fallback will persist. To realistically load in 100ms a Google Font must already be in the visitors cache. # Clear Fonts Cache Adding and removing font-families and font weights automatically clears the fonts cache. However, it can also be cleared manually. Navigate to `Appearance` → `Customize`→ `Fonts Plugin` → `Debugging` Click the 'Clear Cache' button and the plugin will do all the work in the background. There's nothing else to do! ![](/files/qCuSWVHV1eWbaso85LTQ) # Adobe Fonts Fonts Plugin natively integrates with Adobe Fonts (Typekit). No extensions necessary. **Note:** To use Adobe Fonts you will need a Creative Cloud account. Unlike Google Fonts, this is not a free service. To begin using Adobe Fonts, navigate to *Fonts Plugin → Adobe Fonts*.
First you will need to add your API key to connect Fonts Plugin to your Creative Cloud account. *You can retrieve your Adobe Fonts API Key here:* [*https://fonts.adobe.com/account/tokens*](https://fonts.adobe.com/account/tokens) ![](/files/-MUrpl1bGZL170_PiZEL) Once you have saved your API key your "kits" will be retrieved. By default they will all be enabled by default, simply click disable to remove any you don't need. ![](/files/-MUrq-Os0tjZNSVZrK2i) By default all kits will all be enabled, simply click 'Disable Kit' to remove any you don't need. Your Adobe Fonts will now be available to use in the Customizer and Post Editor. There's nothing else to do. ![Use Adobe Fonts sitewide in the Customizer](/files/-MUrqJcLfkOfJBbi3yoB) ![Use Adobe Fonts in Gutenberg](/files/-MUrqjH7TJLkPT9YFJ7V) ### Refresh Fonts If you add, remove or edit a Kit in Adobe Fonts, press the 'Refresh Fonts' button under *Fonts Plugin → Adobe* Fonts to ensure the most recent data is available to Fonts Plugin. # Beaver Builder How to use Google Fonts in the Beaver Builder WordPress plugin. To use Google Fonts in the 'Beaver Builder' plugin, you must first tell the plugin which fonts you want to use. * In wp-admin, navigate to `Appearance` → `Customize` * Click `Google Fonts` → `Advanced Settings` → `Load Fonts Only` * Add the fonts you want to use * Click `Publish` ![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LkTSjUWN2UHe7kspGpw%2F-LkVGhNqRyl51Q8q6Y4e%2F-LkVHZyEWATRRO7rb3V5%2Fimage.png?alt=media\&token=954ff77d-f22a-4224-bf8c-018c3f19c4cf) Now when using the 'Text Editor' block within the Beaver Builder you will have access to the fonts you have chosen (as well as some system fonts): ![](/files/-LkdJ1yZ7z7WFTdX4BSC) # Elementor How to use your chosen fonts in the Elementor WordPress plugin. In this guide we will refer to Elementor's global settings. To access those, edit a page, then click the 'Site Settings' icon. Next, click the 'Typography' section under 'Theme Style'.
{% hint style="info" %} It's also possible to set fonts for individual text blocks, which we will also cover below. {% endhint %} ### Custom/Uploaded Fonts First, follow the guide on uploading your custom fonts [here](/custom-font-uploads/custom-font-uploads). #### Global Fonts in Elementor When using the 'Typography' settings within Elementor you will now have access to the fonts you uploaded.
#### Text Editor Fonts in Elementor When using the 'Text Editor' block within Elementor you will now have access to the fonts you uploaded.
### Abobe Fonts (Typekit) Fonts First, follow the guide on integrating Adobe Fonts with Fonts Plugin [here](/integrations/adobe-fonts). #### Global Fonts in Elementor When using the 'Text Editor' block within Elementor you will now have access to your Adobe Fonts.
#### Text Editor Fonts in Elementor When using the 'Text Editor' block within Elementor you will now have access to your Adobe Fonts.
### Google Fonts To use Google Fonts in the 'Elementor' plugin, you must first tell the plugin which fonts you want to use. * In wp-admin, navigate to `Appearance` → `Customize` * Click `Google Fonts` → `Advanced Settings` → `Load Fonts Only` * Add the fonts you want to use * Click `Publish` ![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LkTSjUWN2UHe7kspGpw%2F-LkVGhNqRyl51Q8q6Y4e%2F-LkVHZyEWATRRO7rb3V5%2Fimage.png?alt=media\&token=954ff77d-f22a-4224-bf8c-018c3f19c4cf) #### Text Editor Fonts in Elementor Now when using the 'Text Editor' block within Elementor you will have access to the fonts you have chosen (as well as some system fonts): ![](/files/-LkdJYamlj0BkPBtHv3_) # WPBakery How to use Google Fonts in the WPBakery WordPress plugin. To use Google Fonts in the 'WPBakery' plugin, you must first tell the plugin which fonts you want to use. * In wp-admin, navigate to `Appearance` → `Customize` * Click `Google Fonts` → `Advanced Settings` → `Load Fonts Only` * Add the fonts you want to use * Click `Publish` ![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LkTSjUWN2UHe7kspGpw%2F-LkVGhNqRyl51Q8q6Y4e%2F-LkVHZyEWATRRO7rb3V5%2Fimage.png?alt=media\&token=954ff77d-f22a-4224-bf8c-018c3f19c4cf) Now when using the 'Text Block' within WPBakery you will have access to the fonts you have chosen (as well as some system fonts): ![](/files/-LkdJmpk5vrR-HCOdqiR) # Divi Builder Fonts Plugin enables you to upload fonts or connect with Adobe Fonts (Typekit) and use them in the Divi buider. First, either upload your font files or connect to Adobe Fonts: {% embed url="" %} {% embed url="" %} Next, when editing a page choose a 'Text' module within Divi:
Next, click the 'Design' tab:
The fonts you have added will now be displayed in the 'Text Font' dropdown. # Contributing How To Translate Google Fonts To Your Language To contribute translations you first need a (free) WordPress.org account. If you don't already have one you can create one here: There are two ways you can translate the plugin. You can translate the plugin itself or you can translate the 'Readme'. The Readme is used to generate the WordPress.org plugin page. ![The Readme is used to generate this page.](/files/-MBiyinRrYqjrdSwv2Hw) Both types of translation are equally important and we are grateful for contributions to either. Plugin translations help non-English speaking users use the plugin and readme translations help them discover and understand the plugin in the first place. To begin contributing translations, go here and find your language: The relevant fields are the first two, they represent the plugin and readme's translation status. A value of 0% means no strings have been translated and 100% means that all strings have been completed. ![The first column is the plugin, the second is the readme.](/files/-MBj05I62il9vcucRj6r) To begin adding translations, click either the first (Plugin) or second (Readme) field next to your language. ![](/files/-MBj19li_IzRShdnrO8U) Rows that are green already have approved translations. To add a translation simply double click the empty field and enter your translation in the area provided. Then press the blue button to submit. ![Click the blue button to submit your translation.](/files/-MBj2AO47EBCZbubojVI) Repeat the process for the remaining strings. Once you submit a translation it will be placed in "Waiting" status (orange). ![These strings are waiting to be approved.](/files/-MBj1rUntzBqnLq7cY4U) Email us () to let us know your translations are waiting and we will work with the translation editors to approve the contributions. This process exists to remove the possibility of malicious or erroneous translations. # Fonts Plugin Pro License Key When you purchase Fonts Plugin Pro your license key will be included at the bottom of your receipt email. *Subject: **Fonts Plugin Pro Purchase*** ![](/files/-MJlSfin0sa3imAgi4r1) Your license key and receipt is also accessible at You will need to login first, if you don't have an account you can [register here](https://fontsplugin.com/account-registration/). {% hint style="info" %} Creating an account will grant you permanent access to your files and license keys. {% endhint %} Once you have logged in, click '*View Licenses*' and then '*Manage Sites*'. If you have already activated a site it will be shown here. Otherwise it will look like this: ![](/files/-MJlTYWEr4eZ6qcqFBTl) If you are having trouble retrieving your license key, simply email our friendly team () and we will be happy to retrieve it for you. ### Activating Your License Key To add your license key to your website, navigate to wp-admin → Fonts Plugin → License. ![](/files/AvsoDJ5JpyD7IgvIRU7J) # Fonts Plugin Pro Files How to re-download Fonts Plugin Pro if your link is lost or expired. The Pro plugin file (*fonts-plugin-pro.zip*) is available inside your account here: First, you will need to login to your account, if you don't already have an account you can [register here](https://fontsplugin.com/account-registration/). {% hint style="info" %} Creating an account will grant you permanent access to your files and license keys. {% endhint %} Once logged in, click **View Details and Downloads**. ![](/files/jbQbXPNC3aFwj3HNrv9P) Next, click the file name to download it to your computer. ![](/files/CSkW69f0m09fCeaBq35R) {% hint style="info" %} To stop Safari automatically unzipping files see here - {% endhint %} On the same page, you can also scroll down to view your **license key**: ![](/files/neFmvEF3Td6LVXCHKBhc) # Updating Fonts Plugin Pro **Error: "Upload Failed: Download Failed. Unauthorized"** Because Fonts Plugin Pro is a premium plugin, your license key and website URL are checked against our database before the plugin is updated. Here's how to fix the "Unauthorized" error. First, check you have entered and activated your license key within wp-admin, under Fonts Plugin → License: ![](/files/-MWizGqZNvWpIJcE-8mc) If you license key is showing as active then the next step is to verify the website URL is correct in your FontsPlugin.com account. Login to your account here: If you don't have an account you can [register here](https://fontsplugin.com/account-registration/). {% hint style="info" %} Creating an account will grant you permanent access to your files and license keys. {% endhint %} If you've forgotten your password, you can [reset it here](https://fontsplugin.com/wp-login.php?action=lostpassword). Once you have successfully logged in, click '*View Licenses*' and then '*Manage Sites*'. If an incorrect URL is shown, you can deactivate the license and add the correct URL instead: ![](/files/-MWj-IktG2c3ZtJxbsPi) **Still not working?** If you have completed the above steps and still can't update the plugin, please [contact us](https://fontsplugin.com/contact) and we'll be happy to help resolve the issue. **Development and Staging URLs** We don't count development, testing and staging URLs towards the activation limit. If you are working on these types of sites please [contact us](https://fontsplugin.com/contact) and we will increase your activation limit. # Manual Update If you are unable to or don't want to use WordPress' built-in updater it's possible to update Fonts Plugin Pro manually. The plugin file (*fonts-plugin-pro.zip*) is available inside your account here: First, you will need to login to your account, if you don't already have an account you can [register here](https://fontsplugin.com/account-registration/). {% hint style="info" %} Creating an account will grant you permanent access to your files and license keys. {% endhint %} Once logged in, click **View Details and Downloads**. ![](/files/jbQbXPNC3aFwj3HNrv9P) Click the file name to download it to your computer. ![](/files/CSkW69f0m09fCeaBq35R) {% hint style="info" %} To stop Safari automatically unzipping files see here - {% endhint %} ### Upload to WordPress Inside */wp-admin* navigate to **Plugins → Add New** and click **Upload Plugin.** ![](/files/DdE2KgpuvmLGz2v3YN66) On the next screen choose the *fonts-plugin-pro.zip* file you just downloaded and click **Install Now**. WordPress will inform you that the old version will be overwritten. {% hint style="info" %} No settings or configurations will be lost when performing a manual update. {% endhint %} ![](/files/w1W8Kpw6txVOsxZXoX21) Click **Replace current with uploaded** and the process should complete successfully. # Support Access We try to minimize sending passwords via email because we value security and privacy. We’ve chosen the [Temporary Login Without Password](https://wordpress.org/plugins/temporary-login-without-password/) plugin to help us achieve this goal. With that plugin, it’s possible to create a special link with which we can log in without the need for a username and password. 1. In your WordPress backend, go to Plugins -> Add new. Search for “temporary login without password” and click the “Install Now” button. 2. After installing, click the “Activate now” button. 3. After activating, we can go to the temporary login settings. Navigate to Users -> Temporary Logins. 4. Click the “Create new” button first. Some entry fields show up. Fill out the email address with The role should be Administrator and the expiry can be set to one week (which is the default setting). Please set the Language to English (United States). After filling the form, you can click submit to complete the creation of a new temporary login. 5. After submitting the form, please click the copy button and share the link with us. We’ll be able to log in without any passwords sent via email and the Admin account will be automatically removed after 1 week.