Introducing the new CQ Typekit integration component

After it was announced that we were acquiring Typekit I had to go see what we were buying. I was pleased to find a great new tool for my web toolbox. Over the years I have had the displeasure of having to reject comp from designers because of their use of beautiful fonts. In some cases I had to cut up comps into a million pieces to try to perserve the intergerty of the design. Over all non standard web fonts have been a real pain to deal with. Yes, there have been other solutions to help me deal with custom fonts overtime but none I really liked. I really like Typekit and the website itself is a work of art.
I am going over the top a bit but its a great platform and I am glad we acquired the company.

Now that I have found a new friend in Typekit, I needed to introduce it to my best friend CQ. After my first integration I thought “Wouldn’t it be cool if an author could do this without any coding or IT help?”. So I went off and created a simple page property extension that allows a author to bind a page and its children to a Typekit kit ID.

The following is a video I shot demoing our new integration component which can be found on the CQ package share. Please forgive my lack of enthusiasm in the video. I was very tired on the day of the shoot.

Our customer package share recently underwent a major upgrade. While I am working on getting this package re-hosted in the package share here is a link to the current version.

6 Responses to Introducing the new CQ Typekit integration component

  1. Victor says:

    Hi, I was wondering if you could make a video on how to make a CQ Carousel contain TextImage content instead of just images. I would gladly take directions if thats all that is available. I really am stuck. Thanks

  2. Mark says:

    Is this available for CQ 5.4?

    • dbenge says:

      It will not work as is with 5.4. Basically my component overloads the fondation Page component and its dialog and adds in options for typekit.

      You could add it into your environment by editing your Page component to include the following in the edit dialog.

      <typekit
                  jcr:primaryType="cq:Widget"
                  collapsed="{Boolean}true"
                  collapsible="{Boolean}true"
                  title="TypeKit"
                  xtype="dialogfieldset">
                  <items jcr:primaryType="cq:WidgetCollection">
                      <useTypeKit
                          jcr:primaryType="cq:Widget"
                          fieldLabel="Enable TypeKit"
                          name="./enableTypeKit"
                          type="checkbox"
                          xtype="selection"/>
                      <typeKitId
                          jcr:primaryType="cq:Widget"
                          fieldLabel="Typekit Kit ID"
                          name="./typeKitId"
                          xtype="textfield"/>
                  </items>
      

      Then in your page component put the following code.

      final String PROPERTY_ENABLE_TYPEKIT = "enableTypeKit";
      final String PROPERTY_TYPEKIT_ID = "typeKitId";
      boolean useTypeKit = false; 
      String typeKitId = "";
      
      try
      {
      	useTypeKit = pageProperties.getInherited(PROPERTY_ENABLE_TYPEKIT,Boolean.class);
      	typeKitId = pageProperties.getInherited(PROPERTY_TYPEKIT_ID,String.class);
      }
      catch(Exception e)
      {}
      
      if(useTypeKit)
      {
          if(typeKitId.length()>0)
          {
      %>
              <script type="text/javascript" src="http://use.typekit.com/<%= typeKitId %>.js"></script>
              <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
      <%
          }
      }
      

      The create a new compo

  3. Dave Moloney says:

    Hi David,

    the Typekit package sounds really interesting! I was wondering if you’d be able to point me in the right direction for it? I can’t access it via the public PackageShare (searching for typekit returns no results).

    Cheers
    Dave

    • dbenge says:

      It seems that someone removed it from the package share. I am working to figure out why it was removed. I will either repost it to the package share or I will put it on this blog post in the near future. In the meantime I will email you a copy of the package.

  4. Sagar Mandal says:

    I also, did not find the typekit integration package in packageshare. Can you please send me a copy of the package or repost it in packageshare.
    Thanks