Jump to content

Archived

This topic is now archived and is closed to further replies.

webmktco

How to integrate Typekit fonts?

Recommended Posts

webmktco+    21
webmktco

In the previous PL, I would add a typekit script in the Custom Code section of the Site Options.  

 

How do you recommend we do this for DMS?  

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

In DMS the process is exactly the same.  You'll login to your Admin level dashboard.  There, you click PageLines > Site Options just as you did in Framework.

 

Then, select Typography, and scroll down. The option to add TypeKit header code is right there, exactly as it was.

 

Please refer to our Docs at http://docs.pagelines.com.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Rob,

 

Happy to read that DMS supports Typekit.

I just bought a DMS Pro subscription. I've looked in my Pagelines Admin section where I only find 'Dashboard' and 'DMS Tools'. When I look in the DMS editor under 'Typography' I can only find 'Google Fonts' implementation. Can you elaborate a bit more as to where I can insert my Typekit code?

 

Thanks, Jan

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Rob I guess it's very busy with the DMS launch, but can you enlighten me about Typekit implementation. The Docs didn't reveal enything.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Jan,

 

We found that not a lot of users actually used TypeKit or Cufon fonts, so the options we removed, as most users were using Google webfonts.

 

If you wish to implement Typekit, you simply need to follow their instructions. http://help.typekit.com/customer/portal/articles/786466-using-typekit-with-a-self-hosted-wordpress-site

 

In the previous version the TypeKit field simply added the code to your header for you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Danny,

 

Thanks for your explanation. It's unfortunate that it got removed since Google Fonts are too limited for most graphic designers for making business websites. Most professional businesses buy official fonts for there identities to have a consistent look in both analog and digital media. Google fonts are digital so I'm surprised that so few people use Typekit. I know Cufon wasn't too popular but Typekit would be a great addition to DMS. I hope you will consider implementing it again in DMS.

 

Changing theme files wouldn't have my preference. Is there a way in which I can insert this code via a child theme or a custom code?

Hopefully you have a suggestion.

 

Jan

Share this post


Link to post
Share on other sites
quintinm    6
quintinm

janpeeters, I agree on the removal of the facility to add typekit - google just doesn't work as well.

Did you get this resolved?

Is there a way to do it using a child theme - if so, i would love to hear how?

 

Thank you.

Share this post


Link to post
Share on other sites
webmktco+    21
webmktco

quintinm all you need to do is add the typekit javascript to the Custom Script section in the DMS dashboard.

 

But you won't be able to choose fonts in the Fonts section like you do for Google fonts.  You'll need to use the style.css in the child theme.  
 

That's how I do it.

Share this post


Link to post
Share on other sites
quintinm    6
quintinm

webmktco, i tried that, but after i save and refresh, they are no longer there...

very frustrating...

 

I have this code that I have found, but not sure if this is correct.
Do I add the following to the functions.php file in my child theme folder?
I would replace the red with my specific code from typekit.

// Add TypeKit <head> Code
function childtheme_typekit() { ?>
 
    <script type="text/javascript" src="//use.typekit.net/t12xau3f.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
<?php }
add_action( 'wp_head', 'childtheme_typekit' );

Does that sound correct, do i past this in my functions.php file?

 

Thanks.

Share this post


Link to post
Share on other sites
webmktco+    21
webmktco

quintinm,

 

You add the Typekit js here:

 

2014-08-01_10-33-27.png

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

As webmktco mentioned, you add the Typekit scripts to the DMS Custom Scripts option via the Toolbar. If you want to add scripts to your child theme, then you're going to need to enqueue them via the WordPress function, you can find more information here - http://codex.wordpress.org/Function_Reference/wp_enqueue_script


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • ketri
      By ketri
      Hello.

      My problem is that if I declare font-families, I'd like to just declare one for the body and one for headings. It works pretty nicely with Typekit, @font-face etc by using something like 
       
      function my_pless_vars( $vars ){     $vars['plBaseFont'] = '"proxima-nova";';     $vars['plHeaderFont'] = '"proxima-nova";';   return $vars; } on my functions.php or 
       
      #site{ h1,h2,h3,h4,h5,h6{font-family: "proxima-nova";} font-family: "proxima-nova"; } on my less -file.

      This works nicely, but the thing that I find annoying is thad modals, buttons, forms and some navs use the @defaultFont which means that I have to override them one by one. What is the reason that they have their own font-family declared? 

      I think their font should just be the one set by the user from google fonts with DMS, or set via function, less or CSS from something like typekit. 
      For example my font in a project is proxima nova. And the fonts for modals, buttons etc is Open Sans. So I  almost did not see that they have a different font which is also a problem.

      So why do they have a font-family declared again in a way that requires more effort if I don't want them to have Open Sans?

      Thank you very much!
       
       
      EDIT: By changing the @defaultFont I change the font-family on the DMS controls, which make sense, but I also change the font-family on buttons, modals etc. which in my opinion does not. Maybe it's a bug or I'm missing something...?  :)
    • bjornhedensjo
      By bjornhedensjo
      Hi,
       
      I use Typekit to get museo slab font instead of the standard fonts on my website http://bjornhedensjo.se/
       
      It works on the entire site except for one place – I seem unable to get Typekit to work in the caption below the picture to the right on the site (the "Highlight"). As far as I can tell I've used all the relevant selectors (such as .highlight-subhead) in Typekit but I still can't get it to work – override CSS – in that particular place. 
       
      Would be very grateful for any ideas on how to fix this.
    • janpeeters
      By janpeeters+
      Hi,
       
      I'm learning to use less for website customisation.
      So far I'm really enthousiastic about the idea of variables.
      My custom style.less file works but one thing I don't get to work is the following:
       
      I'm using Typekit for www.panassembla.com
      Typekit is working when I use it in the conventional way, but when I add the Typekit font to the variables in style.less like this it doesn't load the Typekit font but shows Times New Roman:
       
      @baseFontFamily:        "ff-tisa-web-pro",georgia,serif;
      @baseFontWeight:        400;
       
      For now I've reverted to adding the font family to classes (this works like it should) but I'd love to get this working as a variable.
      Hopefully you know what I'm doing wrong.
       
      Thanks, Jan
×