WordPress.org

Ready to get started?Download WordPress

Forums

Google Webfonts For Woo Framework
[resolved] Cabin font conflict (11 posts)

  1. iwpdev
    Member
    Posted 7 months ago #

    Hi. I have installed the plugin and have the API key working great, but the body font I want to use is called Cabin and since installing the plugin, it no longer renders correctly. When first installing the plugin, those fonts were highlighted in the lists and showed them differently. WooTheme was using 400, 700 and your list is showing regular, bold instead of the numbers. I am using all the latest: Canvas V5.30, Framework 5.5.5, WordPress 3.6. If I change the font the body copy changes, but I really need to get Cabin working. Any ideas? Thanks.

    http://wordpress.org/plugins/google-fonts-for-woo-framework/

  2. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    400 is equivalent to normal, and 700 is equivalent to bold. When selecting Google web fonts, either should work in the same way (700 == bold == b).

    In addition to normal and bold, there is now medium and semi-bold (500 and 600), so there are variations between normal and bold.

    The cabin font is previewed in the settings page with this being added to the header:

    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i">

    so the font is being requested by number and not by the name as appears in the settings page.

    When the Cabin font is used in the theme, this gets added to the header of each page:

    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cabin:r,ri,500,500i,600,600i,b,bi|{other fonts}">

    This is slightly different - 'r' and 'b' are requested instead of '400' and '700'. But browsers *should* see them as the same thing.

    So a question: does Cabin display differently in the preview in the settings, then it does in the content body?

    Do you have a site URL you can post here, or any screen shots you can email me?

  3. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    If you put a tag like this in a post, how does it look?

    [typography font="Cabin" size="72" size_format="px"]Cabin Font Test[/typography]

    It looks a little rough around the edges to me, like anti-aliasing is not working. Is that what you are seeing?

    But then, it looks much the same to me here:

    http://www.google.com/fonts/specimen/Cabin

    The Cabin samples on the Google site all look rough, apart from the first extra-large example. Chrome displays the same as FF.

  4. iwpdev
    Member
    Posted 7 months ago #

    Hi Jason,

    Thanks for responding so quickly. Basically Cabin is not rendering at all. It's very strange. It was working when I was using it just within Canvas, but once the plugin was installed, any font that was referencing Cabin is defaulting to it's generic sans-serif fallback. This is even happening with the test tag you mentioned above. I prefer not to post a URL here since it is still in staging, but I could email to you personally. What email address should I use?

    Thank you.

  5. iwpdev
    Member
    Posted 7 months ago #

    I just discovered something. It was not referencing Cabin in the Google link reference in the head section. It was only loading the other fonts I was using through your plugin '<link href="http://fonts.googleapis.com/css?family=Cabin+Condensed:r,500,600,b|PT+Sans+Narrow:r,b" rel="stylesheet" type="text/css">' What I did was add your Cabin reference code above into the WooTheme Hooks in the head and all is working again.

  6. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    You may be on to something. If I use "Cabin" and "Cabin Condensed" in a theme, I get this in the header:

    <!-- Google Webfonts -->
    <link href="http://fonts.googleapis.com/css?family=Merriweather:300,300i,r,ri,b,bi,900,900i|Advent+Pro:100,200,300,r,500,600,b|Cabin+Condensed:r,500,600,b" rel="stylesheet" type="text/css" />

    If I removed "Cabin Condensed" then I get this:

    <!-- Google Webfonts -->
    <link href="http://fonts.googleapis.com/css?family=Merriweather:300,300i,r,ri,b,bi,900,900i|Advent+Pro:100,200,300,r,500,600,b|Cabin:r,ri,500,500i,600,600i,b,bi" rel="stylesheet" type="text/css" />

    So if you use both fonts, then only one appears, so there is certainly a problem there. The simplest workaround is to use one or the other only.

    I'll have to do some more testing to see if this is a problem with the plugin, or with the Woo Framework. If I add those two fonts to the Woo Framework core and disable my plugin, we can see how it behaves. If it works in that instance, then the fault is in my plugin. I probably won't get a chance to look at this until tomorrow, but at least we know what is happening: two fonts being used, where one has a name that is a subset of the other, the shorter named font does not get used.

  7. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    Here you go. "Delius" and "Deluis Unicase" with my plugin:

    <!-- Google Webfonts -->
    <link href="http://fonts.googleapis.com/css?family=Merriweather:300,300i,r,ri,b,bi,900,900i|Advent+Pro:100,200,300,r,500,600,b|Delius:r|Delius+Unicase:r,b" rel="stylesheet" type="text/css" />

    and without my plugin:

    <!-- Google Webfonts -->
    <link href="http://fonts.googleapis.com/css?family=Merriweather|Delius|Delius+Unicase" rel="stylesheet" type="text/css" />

    Note that Advent Pro disappears, since the 5.5.5 Woo Framework does not support that, and Delius Unicase loses its bold variant, as that variant did not exist when the Woo Framework took a snapshot of the available fonts at the time (several years ago, by the looks of it). But in both cases we get both "Delius" and "Delius Unicase". So I'm more confused than before. What is special about Cabin vs Cabin Condensed that is so different to Delius vs Delius Unicase?

    A mystery for tomorrow ;-)

  8. iwpdev
    Member
    Posted 7 months ago #

    Interesting. That is very strange. Thanks for digging into this. I am surprised at how old the Google Font library is in the Woo Framework, but your plugin gives me access to the other fonts I need in such an easy manner so Thank You for that, the plugin is great. Good luck with solving the mystery and I hope you can figure it out.

  9. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    The problem is in the Woo Framework. In functions/admin-functions.php this loop builds the font string that appears in the head of the page:

    foreach ($google_fonts as $font) {
       // Check if the google font name exists in the current "face" option
       if ( $option['face'] == $font['name'] AND !strstr($fonts, $font['name']) ) { // <<-- this second condition is the problem
          // Add google font to output
          $fonts .= $font['name'].$font['variant']."|";
       } // End If Statement
    } // End Foreach Loop

    What it does is instead of keeping a list of the fonts it has already put into the string, is that it looks to see if the font name in the loop appears anywhere in the string. That means if "Cabin Condensed" is added first, then "Cabin" will appear to already have been added (even though it hasn't). It's a schoolboy error, with code thrown together without thinking about the data that will drive it.

    Now, since the "Delius" and "Delius Unicase" fonts *did* work, we know there has to be a workaround. The workaround is to ensure the shorter font always appears first. So I'll look at my sorting algorithm and make sure the shorter name appears first when two adjacent font names overlap.

    This still won't fix wider cases where font "My Cool Font" is used, which then prevents "Cool Font" being loaded - those two fonts would never be next to each other alphabetically and so no tweaks to the sorting algorithm is going to swap them around.

  10. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    Actually, I've just look at that Woo Framework code again, and it is worse than I thought, and I can see no workaround.

    What the woo_google_webfonts() function does is this:

    1. It loops through all the theme options and picks out any option with a "face" element. These will be the fonts selected in the theme, and will be selected in no particular order.

    2. For each "face" found, the function will loop over every single Google font that it knows about. These will be the fonts supplied by this plugin.

    3. If the "face" name matches a Google font in the loop AND the font name does not already appear somewhere in the header font link, then it will be added to the font list in the header.

    Note that even if the font does match, and has not already been used, the loop will continue over all remaining Google fonts, checking each in turn (even though we know none will match).

    So the order in which the fonts are added to the page head will depend on the order in which they happen to appear in the theme options. It makes no difference what order the Google fonts are listed or supplied.

    The worst bit about this is the long loops within loops; it is inefficient and a waste of time. It should collect the list of fonts used in the theme together first - that is one loop, Duplicates can be discarded at this stage.

    Then this list of fonts can be searched for in the Google Font list. That is a second and final loop. The fonts, as they are found and added to the head, would be ticked off the list so that none are missed out.

    So in conclusion: the original issue cannot be fixed in the plugin. It needs to be fixed in the Woo Framework, specifically the woo_google_webfonts function. That function *could* be overwridden in the plugin, but I would like to avoid going down that route.

    If you are interested, this fixes the framework:-

    Replace this in woo_google_webfonts()

    foreach ( $woo_options as $option ) {
        // Check if option has "face" in array
        if ( is_array($option) && isset($option['face']) ) {
            // Go through the google font array
            foreach ($google_fonts as $font) {
                // Check if the google font name exists in the current "face" option
                if ( $option['face'] == $font['name'] AND !strstr($fonts, $font['name']) ) {
                    // Add google font to output
                    $fonts .= $font['name'].$font['variant']."|";
                } // End If Statement
            } // End Foreach Loop
        } // End If Statement
    } // End Foreach Loop

    with this new code:

    $fonts_used = array();
    foreach ( $woo_options as $option ) {
        if ( is_array($option) && isset($option['face']) ) $fonts_used[$option['face']] = $option['face'];
    }
    foreach ($google_fonts as $font) {
        if (isset($fonts_used[$font['name']])) $fonts .= $font['name'].$font['variant']."|";
    }

    That gives you Cabin *and* Cabin Condensed.

  11. Jason Judge
    Member
    Plugin Author

    Posted 7 months ago #

    I would report this as a bug, with a fix, to WooThemes, but they do like to hide the fact that bugs exist in their themes, and only accept "support issues". The hard work put in by people to fix their products, with no thanks returned, except for price increases justified by the improved (bug fixed) products has always been a little disappointing to me. So the Woo Ninjas are going to have to come find this fix by themselves.

    I'll mark this as resolved, as there is nothing this plugin can do to fix the issue (it is elsewhere).

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.