Conversation
supportI installed this plugin and entered in an API key and saved the settings which seemed to work. Now in my theme options for Canvas I’m seeing hundreds of new fonts. The problem I’m having is that I am looking to use Open Sans with the Light option. I can see this option the plugin preview settings page but I can’t actually select it in the Canvas theme options. It’s not available within the dropdown. Help would be appreciated. http://wordpress.org/plugins/google-fonts-for-woo-framework/
Open Sans and Open Sans Condensed, comes in “Thin” weights (300) but not “Light” (200). This means your previews of ultra-light, light and thin, will all look the same. Whether the theme aks the browser to display a “faux” thin, and whether the browser will support that, is another thing altogether. However, having looked at the Google Open Sans page, there does appear to be a Light/300: http://www.google.com/fonts/specimen/Open+Sans This plugin just displays the names for convenience, but the names do not have any impact on what does and does not get displayed. The plugin will ask Google for the “300” weight of Open Sans, and whatever that is equivalent to in the browser and theme, it will be displayed. I’ll check the names Google uses against the lists I have from other sources – it seems every font provider makes up their own names, and they can sometimes clash.
Here is how Typekit maps the names to the weights: http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles 100 = thin 200 = extra-light 300 = light 400 = normal, book 500 = medium 600 = demi-bold 700 = bold 800 = heavy 900 = black Here is another take, used by webtype: http://www.webtype.com/info/articles/fonts-weights/ 100 Extra Light or Ultra Light 200 Light or Thin 300 Book or Demi 400 Normal or Regular 500 Medium 600 Semibold, Demibold 700 Bold 800 Black, Extra Bold or Heavy 900 Extra Black, Fat, Poster or Ultra Black Yet more definitions: http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/ 100: Ultra Light 200: Thin 300: Light 400: Regular 500: Semi Bold 600: Bold 700: Extra Bold 800: Heavy 900: Ultra Heavy I’ll update the plugin for the next release to make it a little more clear, and lean towards what Google uses for the names. In the meantime, you want the 300 weight, and that is being loaded for you, so there is no rush for any changes to the labelling 🙂
This is what W3C says about it: http://www.w3.org/TR/CSS2/fonts.html Weights: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit “The ‘font-weight’ property selects the weight of the font. The values ‘100’ to ‘900’ form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword ‘normal’ is synonymous with ‘400’, and ‘bold’ is synonymous with ‘700’. Keywords other than ‘normal’ and ‘bold’ have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.” So there you go: only “normal” and “bold” are support by the standards, and all the other names are up to the whim of ythe browser renderers. If you want weight “300”, then the recommendation is to use weight “300” and not “thin” or “light” or “book” or “demi”, as that *will* mean different things to different browsers that use different rendering engines. I’m sure there will be an outright winner in the end, but the dust has not settled yet on how font weights are handled. Sorry this became an essay, but I never stop learning how deep and complex this stuff goes. Let me know if this resolves your issue, i.e. if looking closer, the theme actually is displaying the weight you want. You may need to take a look at the weight values that Canvas uses to select fonts. Actually, what the hell, here it is: 300 = Thin 300 italic = Thin/Italic normal = Normal (aka 400) italic = Italic (aka 400) bold = Bold (aka 700) bold italic = Bold/Italic (aka 700) Looking at this, the weights that Canvas supports look pretty pathetic compared to what Google provides. It just does normal, “thin” (aka Google’s “light”) and bold. There are another six weights that Canvas does not even recognise. Raise that as a feature request with WooThemes! It may be useful for me to add an option to this plugin to restrict the loaded font weights to 300/400/700 only. For people using just the stock Canvas and no custom CSS, that option would speed up the loading of the fonts, as it would not be loading weights that are never used.
I’ll close this ticket, though I do still have some actions from it (for example, being able to choose not to load the weights from Google that the theme simply does not support of the box and so many people will not be using). The answer to your original question about the missing “light” weight, is that it is there as weight 300, but it is called “Thin” in the WooThemes’ theme, and called “Book/Thin” in the plugin. If it really isn’t working for you, please feel free to reopen the ticket.
Open Sans and Open Sans Condensed, comes in “Thin” weights (300) but not “Light” (200). This means your previews of ultra-light, light and thin, will all look the same. Whether the theme aks the browser to display a “faux” thin, and whether the browser will support that, is another thing altogether. However, having looked at the Google Open Sans page, there does appear to be a Light/300: http://www.google.com/fonts/specimen/Open+Sans This plugin just displays the names for convenience, but the names do not have any impact on what does and does not get displayed. The plugin will ask Google for the “300” weight of Open Sans, and whatever that is equivalent to in the browser and theme, it will be displayed. I’ll check the names Google uses against the lists I have from other sources – it seems every font provider makes up their own names, and they can sometimes clash.
Here is how Typekit maps the names to the weights: http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles 100 = thin 200 = extra-light 300 = light 400 = normal, book 500 = medium 600 = demi-bold 700 = bold 800 = heavy 900 = black Here is another take, used by webtype: http://www.webtype.com/info/articles/fonts-weights/ 100 Extra Light or Ultra Light 200 Light or Thin 300 Book or Demi 400 Normal or Regular 500 Medium 600 Semibold, Demibold 700 Bold 800 Black, Extra Bold or Heavy 900 Extra Black, Fat, Poster or Ultra Black Yet more definitions: http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/ 100: Ultra Light 200: Thin 300: Light 400: Regular 500: Semi Bold 600: Bold 700: Extra Bold 800: Heavy 900: Ultra Heavy I’ll update the plugin for the next release to make it a little more clear, and lean towards what Google uses for the names. In the meantime, you want the 300 weight, and that is being loaded for you, so there is no rush for any changes to the labelling 🙂
This is what W3C says about it: http://www.w3.org/TR/CSS2/fonts.html Weights: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit “The ‘font-weight’ property selects the weight of the font. The values ‘100’ to ‘900’ form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword ‘normal’ is synonymous with ‘400’, and ‘bold’ is synonymous with ‘700’. Keywords other than ‘normal’ and ‘bold’ have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.” So there you go: only “normal” and “bold” are support by the standards, and all the other names are up to the whim of ythe browser renderers. If you want weight “300”, then the recommendation is to use weight “300” and not “thin” or “light” or “book” or “demi”, as that *will* mean different things to different browsers that use different rendering engines. I’m sure there will be an outright winner in the end, but the dust has not settled yet on how font weights are handled. Sorry this became an essay, but I never stop learning how deep and complex this stuff goes. Let me know if this resolves your issue, i.e. if looking closer, the theme actually is displaying the weight you want. You may need to take a look at the weight values that Canvas uses to select fonts. Actually, what the hell, here it is: 300 = Thin 300 italic = Thin/Italic normal = Normal (aka 400) italic = Italic (aka 400) bold = Bold (aka 700) bold italic = Bold/Italic (aka 700) Looking at this, the weights that Canvas supports look pretty pathetic compared to what Google provides. It just does normal, “thin” (aka Google’s “light”) and bold. There are another six weights that Canvas does not even recognise. Raise that as a feature request with WooThemes! It may be useful for me to add an option to this plugin to restrict the loaded font weights to 300/400/700 only. For people using just the stock Canvas and no custom CSS, that option would speed up the loading of the fonts, as it would not be loading weights that are never used.
I’ll close this ticket, though I do still have some actions from it (for example, being able to choose not to load the weights from Google that the theme simply does not support of the box and so many people will not be using). The answer to your original question about the missing “light” weight, is that it is there as weight 300, but it is called “Thin” in the WooThemes’ theme, and called “Book/Thin” in the plugin. If it really isn’t working for you, please feel free to reopen the ticket.