How Would You Enqueue A Google Web Font?

by

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?

2 Answers
2

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.

Leave a Comment