Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm having a go at designing a premium WP theme, and I've found numerous plugins that allow you to load fonts from Google Web Fonts and other services. However, how do I let administrators actually configure the site-wide heading and body text fonts?

To clarify: When writing a stylesheet, I need to type in the name of the fonts that will be used (e.g. h1 { font-family: Cuprum }. However, I want to be able to choose different fonts for my CSS from my admin panel by picking from available Google Web Fonts.

One option I can think of is using font-family: HeaderFont, font-family: BodyFont, etc. in my CSS, and then loading whichever fonts have been chosen under those names using @font-face, e.g.

@font-face {
  font-family: 'HeaderText';
  font-style: normal;
  font-weight: 400;
  src: local('Cuprum'), local('Cuprum-Regular'), url(http://themes.googleusercontent.com/static/fonts/cuprum/v3/sp1_LTSOMWWV0K5VTuZzvQ.woff) format('woff');
}

But that seems like quite a complex solution, and I haven't seen it done that way. What's the accepted way to do this?

share|improve this question
Are you addressing the application of ANY font or is there a particular difficulty when it comes to applying external fonts? – kalengi Jul 25 '12 at 19:39
@kalengi - please see my edit; I'm finding it quite complex to describe what I need, although it's actually quite simple. – egasimus Jul 25 '12 at 20:12

1 Answer

up vote 0 down vote accepted

Just a suggestion:

  1. Learn from another plugin
    Take a look at this plugins code to find out how it integrates Google Fonts http://wordpress.org/extend/plugins/wp-google-fonts/screenshots/

  2. Learn by example create your own Theme Panel
    a. Here's a wp-tut http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/

b. (from comments below) The easiest approach is to just output the user's CSS into the page template ... That's also the nasty approach. The best method will be to write the users saved options to a custom.css file and even save them in the Wordpress database.

  1. Develop your theme using a theme framework WooThemes or Thesis are probably great starting points see also: http://www.webdesignerdepot.com/2011/10/a-comparison-of-leading-wordpress-theme-frameworks/
share|improve this answer
Thanks, this exactly what I want to achieve; however, it seems like quite the inelegant solution - maybe there's an even better way? – egasimus Jul 25 '12 at 21:13
There's a tut on wp-tuts that covers making your own admin page for your theme ... It's probably where I would start – Damien Jul 25 '12 at 21:53
Sure I will! That seems the lesser problem, though - how do I put the chosen fonts in my CSS? – egasimus Jul 26 '12 at 8:04
The easiest approach is to just output the CSS into the page template ... That's also the nasty approach. The best method will be to write the users saved options to a custom.css file and even save them in the Wordpress database. Have you downloaded any of the free themes from woothemes ? That will probably help you alot – Damien Jul 26 '12 at 8:15
Thanks, that's a lead. Gonna have a look at them. – egasimus Jul 26 '12 at 8:54
show 3 more comments

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.