WordPress Font Customizer plugin : Google Fonts + CSS3 effects 18


Hi,

Today I am happy to present the next WordPress plugin from Press Customizr called Font Customizer.

If you are like me, you have probably often spent hours on various blogs and specialized websites to find the perfect font combinations for your webdesign…and then another few hours to try to style your fonts with the best color, size, effects…

 

Why do we care so much about fonts?

 

Web Design is 95% Typography.

Oliver Reichenstein from Information Architects Inc., one of the best design agency in the world.

Read the full post here

 

I can’t help but agree with Oliver Reichenstein : typography is key in webdesign. We spend our days reading informations on the web, and we really feel the difference when a design uses a good typography combination.

In the past few years, the CSS level 3 has opened even more design opportunities with new properties like ‘text-shadow’. That’s why I have been working on the extension I always dreamed to have on my websites to save me hours of research and html/css integration. 

 

The Font Customizer extension allows you to customize the font of any part of your theme in live preview with the WordPress customizer. You can

  • choose among 600+ Google Fonts and preview it in your website just by hovering the font in the list.
  • apply 40+ incredible CSS3 effects : shadows, emboss, inset, 3D, fire animations, neons, …you just won’t believe it!
  • goodbye CSS stylesheets! You can access to any property of your fonts in the live option panel : size, color, weight, letter-spacing, etc…
  • take control over the icons next to posts or title : display or hide them
  • make beautiful font combinations
  • easily select the font you need to customize by zones

 

It is almost ready, and I can’t wait to present some screenshots of it!

For further reading, five great ressources about fonts in web design :

  1. Choosing Types Principles
  2. Four techniques for combining fonts
  3. 8 tips Combining typefaces
  4. Rules for beautiful typography
  5. Principles for beautiful Typography

 

  • This is a great tool. You’ve taken coding a giant leap forward. Hopefully I’ll be able to sort the process out and construct a really cool site.

  • snotpg

    Bravo, c’est super et cela fonctionne bien. Merci
    *********************
    Wow, this is great and it works well. thank you

    • Thanks for this translated feedback @snotpg! 😀

  • Christian Alkemper

    This new plug-in is indeed a great leap forward. Thanks very much for it—it’s come in pretty handy just a few days after I had started building my new site using Customizr. However, a few questions have come up since I started using it.
    1) You can set up a default font for your entire website; afterwards, when you select other items (for example, the site title), there are fields for Subset, Font Family, and Apply An Effect. These are empty fields rather than dropdown lists (or at least they are in my Firefox with a number of security add-ons). Do I have to fill in those fields, and if so, how? Am I missing anything? I think there is no documentation (yet), right?
    2) A want-to-have feature: From a typographical point of view, it is often desirable to have a different font in the headers that contrasts with the standard body font. It would be great if this could be an option in a future version of the plug-in—one font in the normal text and a different one for all headers. Until then, I have to go with CSS sniplets …
    Again, thanks very much for doing a great job with this marvelous theme.
    Christian (from Germany)

    • Hi Christian and thanks for this feedback, much appreciated!
      1) This is not a normal behaviour. You should see dropdown lists.
      Can you please try to identify which WordPress plugin (or FireFox security addon) could be in conflict? (just desactivate them all and reactivate each plugin one by one)

      2) You should be abble to do this with the plugin.

      Thanks, I look forward to reading your feedback!

      • Nicolas,

        Thanks for your quick reply. I now have disabled all extensions and plug-ins in FF and the behavior is still as previously described. I also have the same behavior in Google Chrome and Internet Explirer. As no other WordPress plug-ins have been enabled yet, we can rule this out. Next, I haven’t tampered with MySQL nor PHP, so that might be ruled out, too. I’m running a Windows 7 64-bit machine. Could some WordPress function or option be the culprit? Just because it happens in any browser I use?

        One more point I have come across: I could run the WordPress Font Customizer plugin without entering the unlock code. (I only entered it when I noticed I had not done so yet.) Would that lead to a clue?

        Best
        Christian

        PS: If you don’t have someone who translates your theme and plugin to German, I could do an English > German translation. (This is just because I’ve noticed that the plug-in is not localized yet.) I’m translator by profession.

      • Thanks for updating the plug-in so quickly. Everything seems to work fine now—except the items in the header category. They still show empty boxes rather than pop-down fields. 🙁 Any idea why that happens?

  • Teodora

    If I buy the WordPress Font Customizer plugin, can I use it on more sites? Or just on one? I am not a developer, but I have three sites.
    Thanks

    • Hi Teodora, There’s no limitation. You can use the plugin on as many websites as you want.
      Best regards,
      Nicolas.

  • MIchael Brannan

    WHat does this mean (see below) =? I uninstalled the lug in and downloaded this one today still getting this error. As a bonus question if I wanted to justify the logo over the left of the slider how do I do that?

    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘TC_admin_font_customizer::tc_skin_generator_settings_fallback’ was given in /home/content/52/8198452/html/wp-includes/plugin.php on line 429

  • Steve Graham

    I’ve been working on my first wordpress site and I spent a considerable amount of time working out how to load google fonts, reading through all the font snippets in the support area and playing around with various combinations in my child style.css after.

    When Nicolas released the font customiser plug-in I thought it was an absolute bargain at the price, given the I’d hours spent learning font css and the trials and errors I’d been through….so I bought it. ‘Out of the box’ it integrates beautifully with the existing customizer theme and it’s easy to set everything up for the font settings and immediately see the effects of the change.

    Once I saw what it could do I immediately ripped out all the hard earned lines and lines of my custom font settings in my child style.css, it’s no longer necessary. As a professional software developer I know the less code I need to write the easier long term site maintenance will be. $20 ? if you’re thinking about buying it “just do it”, it’s worth every cent.

  • Claude Emond

    Hello
    just bought the plugin. How can I change the line spacing between paragraphs. I figured out for the space between the lines but have no clue for the space between paragraphs. Can I do this in the plugin control panel. Sorry if it has an obvious answer. I am new to all that and I am not a programmer

    Thanks

    • Hi Claude, the line spacing between paragraphs can’t be set from the plugin control panel. It has to be done either in the custom css field (if you are using Customizr theme) or in your style.css file if you using any WordPress theme.
      This can be changed with the following CSS line for example :

      p {
      padding:10px 0px;
      }
      
      More about the padding CSS property.
      Hope this will help!
      • Claude Emond

        Thanks a lot Nicolas. I’ll do that.
        I am using Salient Theme for a new site. I’ll have a look at your Customizr Theme for a switch or for another of my sites. Even with a WP site developer, I am going crazy. It took him so many hours to try to make Salient 100 % responsive (was supposed to be included in the box !!) still with questionable results. I wish I’d known about your theme before spending all that money with so called drag and drop wonder themes !
        Cheers from Montreal
        Claude

        • Thanks for this feedback Edmond!
          Live long and prosper with Customizr.

  • Hi I am using the free version of font customizer and am about to buy the pro version if the effects work in the pro because in the free version it doesn’t work when you close the customizer the effects are gone all the rest of the features work but I like the effects feature
    the most. I have also signed up for the Share A Sale program and when I was signing up it mentioned banners and media where do I get that because I am about to make a post about what plugins are helpful and am going to be talking about your theme and the font customizer

    Mind Your Web Design