Adobe Fonts/TypeKit is available from Adobe as a part of the Adobe Creative Cloud subscription without any extra charges. Most of the professionals including bloggers and marketers have Adobe Creative Cloud subscriptions for using Adobe Photoshop. Adobe serves font from highly optimized CDN and the premium fonts are great for typography. Adobe made some changes which made it affordable, and easy to use their web fonts with WordPress.
This guide has three parts. First, an example of a WordPress theme’s CSS to use the custom font. Second, how to create a library of fonts on Adobe Creative Cloud and get the URL to incorporate. Third, how to load the font’s CSS file URL on WordPress to avoid blocking.
How To Write CSS to Use Adobe Fonts/TypeKit Fonts in WordPress
On this website, we are using a combination of Proxima Nova and Museo Slab of different font weights. These are part of our CSS to explain to you how we have used the fonts:
---
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | ... html { font-size: 62.5%; /* 10px browser default */ -webkit-font-smoothing: antialiased; } ... body,input,textarea,.widgettitle, #cancel-comment-reply-link, .subheading,.sidebar .mycb-notifications h5, .category h4 { font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif; } ... h1,h2,h3,h4,h5,h6,blockquote,blockquote p,.wp-caption-text, .font-museo,.view-more,.table .row.title,.table .row.title-empty, .testimonials .photos .author,.testimonials .quotes ul li p, .sidebar .enews-widget h4,.archive .showcase-navigation .label, .themes-filter .label { font-family: 'museo-slab', sans-serif; } ... /* Font Size ----------- */ .site-title, .content .section .headline h2 { font-size: 42px; font-size: 4.2rem; } ... |
We have fine-tuned the font-weight in the next part of CSS, for example:
1 2 3 4 5 | .entry-content h4 { font-weight: 700; margin-top: 32px; margin-top: 3.2rem; } |
So, we require proxima-nova and museo-slab of different font weights such as 100, 300, 500, 700 etc. We made a list of our required font-weight.
How To Create a Library on Adobe Creative Cloud With the Required Fonts With Required Font Weight
Add two or three fonts of your choice by following Adobe’s guide:
1 | https://helpx.adobe.com/fonts/using/add-fonts-website.html |
When you search for a font on their web UI and open the font’s webpage, like this one:
1 | https://fonts.adobe.com/fonts/proxima-nova |
On the right hand, you’ll get an option on the right-hand side “Add to Web Project”, after clicking that link, you will get the option to create a new library for the web:
Here is the full size screenshot.
After adding the required fonts to a new project, navigate to “My Fonts”, and click “Web Projects” :
1 | https://fonts.adobe.com/my_fonts#web_projects-section |
Click “Edit project” and select the font weight you want:
Save it, collapse it. You’ll get the link on the project’s main page:
1 2 3 4 5 | EMBED PROJECT To use these fonts on a web page, copy this code into the <head> tag of your HTML. You can embed this project on any website you manage. Learn More <link rel="stylesheet" href="https://use.typekit.net/nulldef123xx.css"> |
Copy that link rel snippet.
How To Load Adobe Fonts/TypeKit Fonts in WordPress
You can always use Adobe’s WordPress plugin:
1 | https://wordpress.org/plugins/typekit-fonts-for-wordpress/ |
But you can easily add this kind of snippet on your theme’s header:
1 2 | <link rel="stylesheet" href="https://use.typekit.net/nulldef123xx.css" media="none" onload="if(media!='all')media='all'"> <noscript><link rel="stylesheet" href="https://use.typekit.net/nulldef123xx.css"></noscript> |
This will be lightweight and will not block the other resources when you are using HTTP/2 on your server.
