I’m using the Rosario font from the Google Web Fonts in my theme and I want to enqueue the font so that if there was ever a plugin that used a fancy font that there wouldn’t be any conflicts or wasted bandwidth.
I want to use the Normal 400, Normal 400 Italic, and Bold 700 in my theme. How should I enqueue the font? Is it worth including the last font variant in case the other script uses it?
Several options I’ve been thinking about:
-
Single
wp_register_style( 'rosario', "http://..." ); -
Combined with Handle
wp_register_style( 'rosario_400_400-italic_700', "http://..." ); -
ALL together
wp_register_style( 'rosario_400', "http://..." ); wp_register_style( 'rosario_400-italic', "http://..." ); wp_register_style( 'rosario_700', "http://..." );`
The third option looks the most explicit and but the multiple calls for same font will probably be more inefficient than simply loading the font twice.
Thoughts?
You should be able to just use
http://fonts.googleapis.com/css?family=Rosario:400,700,400italicwhich is the “combined” URL given by Google when selecting multiple weights/styles of a font. You can then just register the font once. You don’t need to over-complicate the$handleeither, something likegoogle-fonts-rosarioshould do just fine as long as it is unique as mentioned in the codex.Go to google fonts and on the font you want select ‘quick use’ next to the ‘add to collection’ button. There are three ways to do what you are looking for very easily JS, @import and standard. You can just select the different weights and styles and Google spits out the code to insert.
Standard looks like this:
@import looks like this:
You can grab the url that google creates for those in the wp_register_style function. The link below is an example.
http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Montserrat+Alternates:400,700