Adobe Typekit fonts offer many more fonts than the commonly used Google Fonts range of typography, helping your web project stand out from the crowd. But it’s not always straightforward getting these to work smoothly…
We’re currently working on one of our largest web projects to date and hit a minor snag that we’ve come across too many times to mention. This being that an Adobe Typekit font is used across the website, which looks lovely in the local development environment. However, test the site on mobile or on other devices and the Typekit font disappears, reverting to its sans serif fallback. Annoying.
After some research we found that when using a WordPress theme (self-coded or purchased) something prevents the Adobe recommended installation method working. This is to add the following line at the top of your website’s css file:
<link rel="stylesheet" href="https://use.typekit.net/abcd123.css">
Then you use Adobe’s provided css code to use the font in your stylesheet …to no avail. You can try variations on the way the font is declared, but none of these seems to work:
font-family: proxima-nova, sans-serif;
font-family: 'proxima-nova', sans-serif;
font-family: "Proxima Nova", sans-serif;
The solution to Typekit fonts not displaying
So, the solution? Delete the <link rel…> line from your css and instead drop the following code into your website’s header code:
<style>
@import url("https://use.typekit.net/abcd123.css");
</style>
Of course when using a WordPress theme you’ll need to add this to the child theme’s header.php file so that it doesn’t get overwritten by future theme updates. Or, if you’re coding your theme from scratch, just add it into your regular header template file. You could also use a plugin like Insert Headers & Footers if you’re uncomfortable working with child themes, template files and php coding.
Now you should see that the Typekit font displays all the time, across all devices for you and other users. Take that, Adobe!
If you still have problems, reach out to us and we may be able to help. Or if you need a website building (or rebuilding) then we’d be happy to discuss requirements and offer a quote – just get in touch
