We work on WordPress

Add Adobe Fonts to your WordPress Theme

Adobe makes a wide range of premium fonts available to Adobe fonts or Adobe Creative Cloud subscribers. These include a wide range of fonts that can be used in the applications and web fonts that can be used on websites. To use the web fonts you must choose the fonts, put them in a collection and then register the URL of websites that will be able to use them. This will only be active while your Adobe subscription continues.

A big advantage of using Adobe fonts is that you can choose a corporate font that is available in both print and web and keep your identity throughout all your marketing content.

There are two ways to install the Adobe Fonts into your website. You can use a plugin, or install them into your theme. In both cases, you will then need to make use of them within your style sheet to apply them to your content.

Selecting your Adobe Fonts

You must have a subscription to use these fonts. You can use the bar on the right to specify the type of fonts you would like to view. Note that some are for applications, some web and some for both. There are also some additional variations of fonts that could be outside your subscription and require a further payment to be used.

Select the fonts you want to use and then you need to add them to a kit. This can then be shared by up to 10 websites, which each need to be specified. You are then given a simple code to include in the code to specify your kit.

ADOBE FONTS

adobe fonts chosen

adobe fonts kit

adobe font kit

adobe fonts add to kit

adobe kit code

Installation into your website.

There are two ways to make use of these fonts. We will look at both in turn.

Typekit plugin

Once installed, you simply paste the code given into the settings of the plugin. There is also an area to add some CSS which will be shown inline. You can also, and this is recommended, add some style changes to your main stylesheet.

Adding to theme

First, you will need to add this code to your functions.php file. It can be argued that this should be added to wp_enqueue_scripts. This would add the code to the footer, rather than the header. The code from Adobe is async and does not slow the loading of the content, so putting in the header is ok. Make sure you change the code from tse6xry to whatever code you are given. You can of course simply add the two function calls to an existing scripts function.

Then you will need to add relevant code to the style.css. This will allow you to link the font-family that you have selected and apply them to a style or tag type. In our simple example we applied them to the body, and then headings.