0

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:

<?php 

$options = get_option('mytheme_theme_options');

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

?>

Thanks.

| improve this question | |
2

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.

So:

$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.)

| improve this answer | |
-2

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'>

<style>
h1 {font-family: <?php echo $theme_options['user_font'];?>;}
</style>
| improve this answer | |
  • 2
    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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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