Live typography preview now included in the WooFramework


Here at Woo, we’re constantly looking out for new features we can incorporate into the WooFramework (the engine that powers all of our 104-and-counting WooThemes). Along with looking out for new features and enhancements, we feel it important to not “code and ignore” a feature, but rather to maintain each feature on a regular basis, to ensure the code evolves along with the WooFramework and our themes.

One of the most popular features across our themes is our custom typography options, which afford website administrators the option of customising the typography settings across their website with a few simple clicks in the WooFramework “Theme Options” screen. When customising the typography settings, the administrator makes changes, hits the “Save all Changes” button and then visits their website to see how the typography has changed. The process, therefore, consists of 3 steps: setup, save, view- until today.

Upon re-examining the user experience surrounding this interface, we felt there were too many steps involved and, if the website being modified was live (for example), a user may not have the desired look displayed to their visitors for a few minutes while they tweaked their typography options. As user experience, and the experience your visitors are presented with when visiting your website are important to us, we’ve introduced an enhancement to the custom typography settings in the WooFramework; a live typography preview.

The new "live preview" button on our custom typography settings

The live typography preview does exactly what it says on the tin. When modifying typography settings in the WooFramework, it’s now possible to view a quick snapshot of what the customized typography will look like, before hitting “Save all Changes”. This agile build (developed and tested over the last weekend) takes the required steps down from 3 to 1, saving you time and making customizing your WooTheme even easier.

Custom typography, using the new live preview

The live typography preview includes support for all fonts available within the typography settings in the WooFramework, including the ever-growing collection of Google WebFonts we’ve integrated to further enhance the typography options available when customizing your website.

Previewing a Google WebFont using the live typography preview

This update is available in WooFramework version 4.7.0 along with a collection of optimizations and improvements, as is customary when upgrading the WooFramework. To take advantage of this exciting new feature, upgrade your copy of the WooFramework today.

For more information on upgrading the WooFramework, please see our theme upgrade guide.
cta-banner-10-product-page-v2_2x
Matty Cohen Avatar

About

31 comments

  1. I think I am going to cry… I love you guys!

    🙂

    Saul
    October 10, 2011
  2. Thank you! Just what I need for the next step in developing my site.

    Anton Zuiker
    October 10, 2011
  3. Very cool enhancement. This is one of the many reasons why I stick with Woo!!!

    Fred Romano
    October 10, 2011
  4. This is great. Just another reason to tell my clients to use WooThemes!!

    Bob Dunn
    October 10, 2011
    • It’s the little things!

      Scott Webb
      October 15, 2011
  5. Excellent enhancement. Keep up the good work.

    Drew
    October 10, 2011
  6. Thank you! This is going to save me time!!! And hassle when modifying a live site.

    Wes
    October 10, 2011
  7. Appreciate the constant improvements. My clients are going to LOVE this!

    DrewAPicture
    October 10, 2011
  8. I was switching between the Google Font Previewer and the Admin screen yesterday, wondering if there might be an easier way … so you can add mind-reading to your long list of talents! Thanks so much 🙂

    David
    October 10, 2011
    • I was thinking the same thing yesterday – like you, I had the Google font preview window open and thought – it’d be great if Woo did an AJAX preview of these fonts. 24 hours later, they have. Thanks for reading my mind, Woo Ninjas. 🙂

      Vince LaMonica
      October 11, 2011
    • That’s freaky 🙂

      Magnus
      October 11, 2011
  9. That’s great! Alone with this new site for Latin Text this is going to rock my socks.
    http://www.boganipsum.com/

    Muzza
    October 11, 2011
  10. Brilliant feature! Now I don’t have to look at the Google Fonts site.

    Calzo
    October 11, 2011
  11. That’s fab – will try it out.

    Also, is there anywhere where I can find Framework changelog?

    Thanks

    Sarah
    October 11, 2011
    • Hi Sarah,

      Thanks. 🙂

      Yes, the WooFramework changelog can either be found in the “functions” folder in your theme, in the “functions-changelog.txt” file, or by clicking the “Changelog” link in the yellow notice bar in the “Changelog” section of your theme’s documentation (eg: http://woocommerce.com/support/theme-documentation/canvas/#changelog ).

      Matty
      October 11, 2011
  12. Yes! One of the most frustrating things in the framework now checked off.

    Chris
    October 12, 2011
    • just upgraded to 4.7.1 and looking in canvas — no button to preview. Is there another step?

      Chris
      October 12, 2011
      • Try refreshing your browser cache 🙂

        Magnus
        October 12, 2011
        • Yep for some reason it just started working. Looks great.

          Chris
          October 14, 2011
  13. Hi!

    I’m still using Swatch theme. I have updated Wooframework’s latest version but I couldn’t operate “Prettyphoto Lightbox” in single pages.

    If you have any idea, will you help me?

    Boray Biçer
    October 14, 2011
    • Hey Boray,

      Jump into the Support Forum and we’ll help you out 🙂

      Scott Webb
      October 15, 2011
  14. I’m running the Object theme. I notice that the fonts on my website (www.dal.dk) have changed, but I can’t find the ection about fonts anywhere on the WooFrameworks “Theme Options” screen.

    Is it really implemented on all themes?

    Hans
    October 15, 2011
  15. why are the typography options NOT alphabetized? It’s such a pain to search through!!! It would also be great to see the font like this: http://www.google.com/webfonts#ChoosePlace:select

    kelly
    December 1, 2011
    • They are alphabetized http://cl.ly/1w3e2s1k1K2F002F3u2m

      You do get to see the font like that with the font preview… not sure what you mean?

      Magnus
      December 1, 2011

Trackbacks/Pingbacks

  1. Case Study: The Cheaper Show | WooThemes
  2. Case Study: The Cheaper Show | themek
  3. Case Study: The Cheaper Show | Major Templates
  4. Case Study: The Cheaper Show | Allnewsyouneed.com
  5. Case Study: The Cheaper Show Cms News Cms News
  6. Woo gets beveled | WooThemes
  7. Woo gets beveled | WPbase

Stay up to date with WooCommerce emails

View our privacy policy. You can unsubscribe anytime.

Subscribing...

There was an error subscribing; please try again later.

Thanks for subscribing!
Emails will be sent to

You're already subscribed!
Emails are sent to

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.