Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 9 down vote accepted

You should be able to just use http://fonts.googleapis.com/css?family=Rosario:400,700,400italic which 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 $handle either, something like google-fonts-rosario should do just fine as long as it is unique as mentioned in the codex.

share|improve this answer
    
+1 nice hint - good to know. –  kaiser Oct 16 '12 at 21:29
    
What about the off chance someone wants to use 700 italic that I didn't include? If I'm declaring that I've included Rosario should that imply all font variants? –  BFTrick Oct 17 '12 at 14:12
    
While I may not understand your original use-case, there is a bit of assumption that goes along with using custom web fonts. When someone includes Arial, it's safe to assume that they have access to every variant of the font, bold, italics, bold italics, etc., but those are system fonts - it doesn't hinder your website to load these variants as with Arial, it is assumed to be available. With custom fonts, "you" decide what's available (as that effects page-load based on the number of variants and the design). The URL query vars while not plain-text should help users decide what is available –  Zach Oct 17 '12 at 14:40
    
Thanks @Zach! For now I'll probably just include all of the font variants even though it increases the page load. In the future I may look into a way to separate out the font variants so that each plugin/theme only has to DL the variants it needs. –  BFTrick Oct 18 '12 at 14:34
    
You could also combine more font families in the same request by separating them with a "|" for example: fonts.googleapis.com/css?family=Titillium+Web:700|Rosario:400,400italic,700,700i‌​talic –  mircea Dec 6 '13 at 9:30

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:

<link href='http://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

@import looks like this:

@import url(http://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic);

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

share|improve this answer
    
The question was asking about enqueue and his use of wp_register_style and wp_enqueue_style. –  Wyck Oct 17 '12 at 3:01
    
My fault, I didn't word that well. The method for retrieving the web address found in both of the other methods for use with wp_register_style is the real point; you can use the link I attached to have google give you the proper url the question was seeking. –  Kyle Oct 17 '12 at 16:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.