#Google font picker for free#
#Google font picker code#

You can connect Oxygen to your Adobe Fonts account from the Oxygen -> Settings -> Typekit page in your WordPress admin panel. Using Custom Web FontsĬustom web fonts (.woff, etc.) can be uploaded using the Elegant Custom Fonts plugin.įonts added using this plugin will appear automatically in Oxygen's font dropdowns.Įlegant Custom Fonts is the best way to use custom fonts with WordPress, and was created by the same dev team that built Oxygen.

If italics are not chosen, the browser will render text set to Italic (under Advanced -> Typography) with faux italics by skewing the font. In this way, if a text element has been set to 400 weight, but you've only chosen 300 and 700 weights in the Google Fonts Weight/Italic Picker, the browser will load the nearest available weight (in this example, 300) when rendering that text element.Īdditionally, by choosing italics in the Google Fonts Weight/Italic Picker, your site will load true italics from Google.

Tick the checkboxes for each weight/italic that you’d like to load on your site.īy ticking these checkboxes, you're telling Oxygen to only ever load the weights selected.

Once you’ve chosen a Google Font, click the weights » link under the dropdown.

Choose a Google Font for one of the existing font options or add a new one.

Go to Manage -> Settings -> Global Styles -> Fonts.

To use the Google Fonts Weight/Italic Picker: The new Google Fonts Weight/Italic Picker allows you to specify the exact weights (and whether to load Italics) you'd like to use, and only ever load those weights regardless of the weights chosen for text elements on your site. Google Fonts Weight/Italic Pickerīy default, if you use a Google Font in Oxygen, all font weights are available and are loaded as long as they are used somewhere on the page or post that you're currently viewing.

To use a font from Google's library, just start typing the font’s name, and the font will then appear in the dropdown.

Because there are so many fonts on Google Fonts, displaying them all at once in the Font Family list would not be practical. Every font on Google Fonts is available in all of Oxygen's Font Family lists. Google Fonts can be used with Oxygen with no special configuration. You can override this on a per element basis by explicitly choosing Display or Text from the Font Family dropdown. To set a font for all other text, select it from Text font list.īy default, heading elements in Oxygen will use the Display font and text elements will use the Text font. To set a font for the headings, select it from Display font list.

#Google font picker code#

Pretty cool huh?Īs part of my programming new years resolutions I've committed myself to writing better documentation so you can find all the code you need to implement this on your own site on the Github Project page.Rather than setting your font on each individual element, you can set fonts globally from Settings > Global Styles > Fonts. The plugin uses a bit of jQuery to detect the clicks and it modifies a hidden select box. Check it out.Īll you have to do is click on the font that looks best to you and it is applied across your website. With this plugin we combine the idea of having any of these awesome fonts available to us and being able to preview them and easily select them in the theme customizer.

#Google font picker for free#

Google Fonts simply allows you to put any of their open-source fonts on your website for free with just a couple lines of code. Google Fonts, Typekit, & Font Squirrel are some of the awesome services that have cropped up in the last few years to fix this. Most developers didn't bother and instead used rastered images which bring up a whole new slew of problems. Way back in the before time when Al Gore founded the Internet and it was still black and white including fonts on your website was an amazingly difficult thing. Building upon the basic controls for the theme customizer is one of the challenges we've been facing and the Google Font Picker Control is the first of (at least two) the controls that we developed to make the Theme Customizer even more awesome. Over the last few months at work we've been digging into the WordPress Theme Customizer and thinking about using it as the basis for a SaaS web app. JanuGoogle Font Picker Control for WordPress