4

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?

Improve this question

2 Answers 2

Reset to default
9

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.

Improve this answer
4
  • 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
    Commented Oct 17, 2012 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
    Commented Oct 17, 2012 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
    Commented Oct 18, 2012 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,700italic
    – Mircea Sandu
    Commented Dec 6, 2013 at 9:30
-1

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

Improve this answer
2
  • The question was asking about enqueue and his use of wp_register_style and wp_enqueue_style.
    – Wyck
    Commented Oct 17, 2012 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
    Commented Oct 17, 2012 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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