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.
Installation into your website.
There are two ways to make use of these fonts. We will look at both in turn.
Typekit plugin
You can use the 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
Download a copy here of our twentyseventeen-child with Adobe fonts support
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.
function typekit_enqueue_scripts() {
wp_enqueue_script( 'typeket-style', 'https://use.typekit.net/tse6xry.js' );
wp_add_inline_script( 'typeket-style','try{Typekit.load({ async: true });}catch(e){');
}
add_action( 'wp_enqueue_scripts', 'typekit_enqueue_scripts' );
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.
body {
font-family: house-movements-poster, sans-serif;
font-style: normal;
font-weight: 400;
}
h3,h4,h5,ul,li {
font-family: "relation-one",sans-serif;
font-style: normal;
font-weight: 400;
}
h1,h2 {
font-family: "relation-one",sans-serif;
font-style: normal;
font-weight: 700;
}
How to ‘cheat’ with our download
WordPress is about sharing, so you are free to download our version. Install it on your site, and you will need the main twentyseventeen theme installed to work with it.
- First, go and choose your fonts if you have not already.
- Next, you need to change the ID of your font kit in the functions.php if you have the theme activated you could even use the editor in the themes menu of dashboard to change the ID
- Now you need to use the same editor to edit the style.css to refer to the font family or more that you have chosen and apply them to whatever styles you want to be used.
- The changes should be seen as soon as you set up the and save the styles.
