WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm writing a theme where I'd like to give users the ability, via a theme option, to specify a typeface for their site with Google Web Fonts.

If a user wants to embed a font like, say, News Cycle, then the code needs to specify this in two places, in a <link> tag within the <head>, and in the site's CSS.

In the <link> tag, the font is specified with a + (plus sign) in the name:

<link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>

However, in the CSS, there is no plus sign:

h1 { font-family: 'News Cycle', arial, serif; }

Ideally I'd like users to just write or paste the name of the font into a form field, and then, in the code, to replace spaces with plus signs where needed.

From googling around, I think this can be done with str_replace or another similar bit of PHP, but I'm a PHP novice. Can anyone shed some light on the best way to do this?

At the moment the relevant PHP in my header.php looks a bit like this:


$options = get_option('mytheme_theme_options');

if( isset( $options['webfont'] ) && ( !empty( $options['webfont'] ) ) )   
printf( "WEBFONT LINK", $options['webfont'] );



share|improve this question
up vote 2 down vote accepted

Wouldn't a better solution be to build your own list of available fonts, and then let the user select which font to use? That way, your validation is much easier, and also, you have more control over how you use/implement the specific setting.

In any case, you should be able to do what you want, within your sanitization callback, where you will (presumably) be ensuring that the input string is sanitized and validated (i.e. that the string actually corresponds to a Google web font name).

Once you have "Valid Name" as the setting value, it is easy enough to do a str_replace() to replace " " with "+".

I would use two settings: $themename_options['google-webfont-css'] to hold the Font Family name (for CSS), and $themename_options['google-webfont-link'] to hold the link parameter.


$valid_input['google-webfont-css'] = // validated and sanitized $input['google-webfont-css'];
$valid_input['google-webfont-link'] = str_replace( ' ', '+', $valid_input['google-webfont-css'];

return $valid_input;

(This is inside your validation callback function.)

share|improve this answer
That worked, thanks. – snthr May 13 '11 at 17:17

I ran in to this question while looking for something completly different. Also I know the question is already 2 years old. But since I have been coding/working with Google Fonts in Wordpress alot, I have come to realize:

There is no need to replace the + in the link. On all browsers I tested the link works with a space too. In my php page where I load additional css and styles I just use:

<link href='http://fonts.googleapis.com/css?family=<?php echo $theme_options['user_font'];?>' rel='stylesheet' type='text/css'>

h1 {font-family: <?php echo $theme_options['user_font'];?>;}
share|improve this answer
Spaces are invalid characters in URLs. Whether it works or not, this is inadvisable. It is bad practice. – s_ha_dum May 3 '13 at 13:03

Your Answer


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.