I’ve reviewed and followed the most recent Typekit instructions as provided by tagDiv admins, but it’s still not working.
By not working, I mean after implementing the link to the stylesheet (in Theme Fonts panel) and selecting the custom font family, the font for the assigned field sometimes changes and sometimes doesn’t. If it does change, it doesn’t represent the actual font specified in Typekit, but shows up as some sort of general serif font.
To confirm the process, here’s what I’m doing:
– Add no more than 3 fonts to an Adobe Font Web Project.
– Insert the embed code into the Embed Code field in the Adobe/Typekit fonts page on the theme panel. Code looks like this: <link rel=”stylesheet” href=”https://use.typekit.net/bzn7dry.css”>
– Add the appropriate names in the Custom Font Fields in the theme panel.
– Using the tagDiv composer, attempt to edit the Block or Module fonts by selecting the name(s) I’ve entered in the Custom Font Fields.
Wordpress and the theme is fully updated.
Looking for troubleshooting ideas and/or solutions. Thanks in advance.
Hi
If you want to use other fonts you can load them in the theme panel (up to 5 custom fonts can be loaded)
– https://www.screencast.com/t/bxTi7gT7VyF
– https://forum.tagdiv.com/font-customization/
Be sure to load the appropriate characters subset – https://www.screencast.com/t/aJv6WnCk
Once you load the desired fonts they will appear in the selection drop-down and you can select them for the elements you want. For example the post content
– https://www.screencast.com/t/nQkcNifoN
First you need to load the Typekit fonts in .woff format -> http://prntscr.com/ptmf0u or JavaScript -> http://prntscr.com/ptmei0
You can name the typekit fonts as you want – https://prnt.sc/pqjpeh in the theme panel. Same for the custom fonts – https://prnt.sc/pqjq3q
If there is still a problem, we can take a look, you can send us an email at contact@tagdiv.com and provide admin login, as well as cPanel. We will take a look. Include a link to this topic in the email.
Thanks
Hope this will help you!
Calin,
Thanks for the information. Since I’m using Typekit, using the .woff format isn’t an option. So I’m left with using an embed code for Typekit. As indicated I’ve tried the “default” embed code from Typekit as well as the Javascript version you reference. Unfortunately I’m getting the same non-working result no matter how I do it. I’m going to go ahead and email the contact address. Appreciate the support.
Hi,
In order to use fonts from Typekit.com, i think that you need to use a script, please try the follow steps:
1.Create an account on typekit.com
2. From Kits menu select Create new Kit
3. In the new pop-up menu:
-Specify a name for your Kit
-Specify the domain name were you will use the font
-Press Continue Button
4. From the next pop-up copy the javascript code
5. Go to Theme Panel > Theme Fonts> Typekit.com Fonts
6. Paste the javascript code that you copy from the Typekit website
Hope this will help better!
Let me know the results!
Thank you!
Solved. My mistake here was not ensuring the name of the font entered in the “custom font family” field exactly matched the name of the font included in my Typekit. Once they match, it works.
And for reference, I’m using the Javascript embed code, which I’ll paste below for reference:
<script>
(function(d) {
var config = {
kitId: ‘XXXXX’,
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,””)+” wf-inactive”;},config.scriptTimeout),tk=d.createElement(“script”),f=false,s=d.getElementsByTagName(“script”)[0],a;h.className+=” wf-loading”;tk.src=’https://use.typekit.net/’+config.kitId+’.js’;tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=”complete”&&a!=”loaded”)return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
