TypeKit Fonts not showing in Customiser

Support
#1

Hello, I have a TypeKit subscription which is working fine on a number of X Theme sites. I have set up a new one and linked my TypeKit Kit code in the appropriate location on the site (see attached screen image):

When I visit the Customiser Screen, I can see all of the system fonts and Google fonts but no sign of the TypeKit fonts. The fact that the fonts are listed on the TypeKit screen, suggests that the code is working.

Have I missed a step to allow those TypeKit fonts to appear in the Customiser screen?

#2

Hey,

You can check if you forgot something here: https://theme.co/apex/forum/t/extension-typekit/88

#3

Hi John,

Thanks for your reply.

I had found that article already and from what I can see, I have done all the steps. The thing that surprises me is that i can see the fonts listed correctly in the TypeKit screen in the WP dashboard (as per the screen shot). They just don’t appear in my font list in the customiser.

That tells me that the theme can find them (as per Type Kit screen image) but then the they are not appearing in the font list. Any ideas?

#4

Hi There,

Please go to X > Launch > Options > Templates > Fonts and set up the typekit. To know more about font manager and how you can set up the typekit, please check this out: https://theme.co/apex/forum/t/features-font-manager/101/1

Hope this helps. Please let us know how it goes.

#6

Hello Lely

I have tried to get the fonts to show and there is something that I’m not doing correctly. I am using the Font Manager and the TypeKit fonts are definitely showing - see screen image below:

When I then go into Customizer > Typography to choose Body Font (Myriad Pro Semi Condensed 400) and Heading Font (Ronnia), they don’t display - all I am seeing is the System fonts and the Google fonts.

I will provide my logon details in a secure note so that you can log in and see what is causing the problem.

Thank you for your help.

Cheers
Neil

#7

Hi there,

I went to your website and turned the Font Manager off. Then saved the options. After that, I turned the font manager on and set the proper options in typography.

Now I see the front end of your website is using correct Typekit fonts:

Thank you.

#8

Hey Christopher - I have done what you have told me but when I go to Typography I don’t see any of my TypeKit fonts as options.

In the Launch / Fonts section, I can add them to my collection but when it comes to using them in Typography, all I am seeing is the full range of Google fonts and System fonts. I can see where I can select the TypeKit fonts anywhere. It is as though I haven’t connected them to my site when clearly I have (otherwise I wouldn’t be able to see them in the Font Manager screen).

A couple of questions:

  1. Should I have the Typekit PlugIn activated (I have tried with it both on and of unsuccessfully)
  2. In what screen should I be able to nominate the actual body font and the actual heading font. In my mind, these fonts are added to the collection in the Launch / Templates / Fonts screen and then we go to the Appearance / Typography to select the individual fonts (i.e. weight, font name, etc).

There is something here that I am missing - I have used the TypeKit fonts on other sites and have always been able to select them from the top of the Font listing once they have been added as TypeKit fonts.

Sorry if I missing something obvious but I have not had this issue ever before.

I have left the login credentials as they were so you can go in again if you require.

Kind regards
Neil

#9

Hi there,

I think there is a misunderstanding of the concept of font manager.

The Font manager acts as a template in our theme, so if you go there and add a name for the template and assign a font it will be available with that name.

So, for example, I will add a template called This is a Test and assign a font called Garamond.

Now as this is a Google Font it will also show in the font list of the body in Typography options, but that is not the case for Typekit.

You just need to select THIS IS A TEST and the font type you like will load.

So you did all the settings correctly and added the BODY template name to the typography body option, and in turn, you added to body template the Typekit font. So you are good to go and the front end already shows the correct font.

Thank you.

#10

Hi Christopher - you’re right! There is a misunderstanding here - sorry!

Where will I find the template?

#11

I think I am getting closer! I’ve now created a template called Neil - Body and chosen just one font - Myriad Pro Semi Condensed 400. When I select the template from the Typography page, the font shows in Italics which is not what I want. I just want it as Regular.

Also, I created a template called Neil - Headings and only selected one font - Ronnia 700. Again, when I choose Neil - Headings, the font is italicised AND it appears to be the same font as the Body - Myriad Pro.

#12

Hey there,

I see that the italic setting is disabled but it’s outputted in the generated CSS. It looks like a caching issue but I see you don’t have a caching plugin but did you use a caching plugin before and does your host have a built-in caching system? If so, please completely remove the caching plugin and contact your host to clear all caches. Then, try re-saving the options.

Thanks.

#13

Have checked with the hosting company. They don’t do caching but have added some code to make 100% certain.

I have never used a caching plugin.

Every computer I try it on still shows italicised Myriad Pro when it should show regular Myriad Pro in the body and bold Ronnie in the headings.

#14

Yes, I see that everything is italic and it’s coming from the italic setting which I see is disabled.

Did you enable that setting previously? I tried that setting in my test site and it works so there’s no issue with the setting. This is why I think this is a caching issue but since you didn’t use a caching plugin and your host doesn’t have caching, I’m not currently sure why it’s stuck to italic.

I tried removing the Typekit extension to see if that is the cause of the issue but it isn’t. There’s also no reason to keep it since you’re using the Font Manager by the way.

Would you mind copying your site over to a staging server so we could do some testing without affecting your live site? Please give us FTP credentials for your staging server also.

Thanks.

#15

Hi Xian

I don’t know how to copy to a staging server.

I am happy enough for you to play around on the live site. I haven’t really launched it yet.

No, I haven’t used italics - i switched the switch on and off to see if it would fix the issue but no luck.

What I thought I would do is re-install the theme and child theme and see whether that fixes it. Let me have an hour to check if the reloaded theme fixes it. I’ll update this ticket when I’ve tried.

Neil

#16

I have deleted and re-installed the X Theme and X-Child Theme and it has made no difference.

Please go ahead and investigate on the live site. The login credentials are as they are listed in the secure note above.

Please let me know how you go.

Thank you

#17

I want to try deactivating all third party plugins but deactivating bbPress gives an error.

Would you mind deactivating it or delete or rename it from your plugins folder. That might be the cause of the issue. Please also check if your WP files and folders permissions are correct. See http://www.wpbeginner.com/beginners-guide/how-to-fix-file-and-folder-permissions-error-in-wordpress/

Thanks.

#18

Hello again!

I have now checked file permissions and have deleted the bbPress plugin.

If we can’t solve this soon, one option would be for me to start the web site from the beginning again. It wouldn’t take too long - let’s see how you go.

For your information, I am based near Melbourne which looks like a different time zone to you. That’s why it often takes time to respond to your replies :slight_smile:

#19

Hi there,

I also checked the case and could not find why that italic font is there. I suggest as a temporary solution you add the code below to X > Launch > Options > CSS:

body {font-style: normal !important;}

At least you can have the website without the italic font. It is not the correct solution but temporary one to help you continue coding your website and avoiding doing things from scratch.

Thank you.

#20

Hi everyone

I have exported the Customiser Manager XCS file and reset the format. I am going to start to rebuild from that point and see how I go.

This has certainly removed the italics problem (and all other formatting) so I will start the re-build of the formatting again.

UPDATE

I have now rebuilt the formatting and as it stands right now - everything is looking good. I am now about to introduce the bbForum plug in. This will be interesting to see if this creates the issue, as predicted earlier in our investigations.

FINAL UPDATE

By removing all formatting and reinstating everything, including the bbPress and other plug-ins, I have been able to solve the problem.

I guess we’ll never know exactly what caused it but thank you for all of your efforts.

Cheers and greetings from Melbourne!

#21

Glad you’ve sorted out. Yes, it was tricky to investigate as the issue could be somewhere in the database and by starting from scratch it certainly got cleared up. The CSS my colleague gave was the last resort but I didn’t give that earlier so we could get into the root of the problem.

Thanks.