Home – New Forums Tech talk Change font on wordpress Reply To: Change font on wordpress

#1106766
bradzo
Member
  • Total posts: 335
Up
0
::
BTD, post: 118467 wrote:
Hi,

Can someone please look at my site http://www.behindthedoorwines.com.ai Is it easy enough for me to go in somewhere and change my font?

Thanks,

Sally

Hi Sally

The best way to do it is with a child theme.

The child theme inherits templates from a parent theme, ie: Twenty Ten the default WordPress theme. This is the preferred way so that when you upgrade WordPress itself, you don’t lose any changes to the way you’ve changed the theme. ie: Don’t make changes to the default theme files – create a child theme instead.

Create a new folder in your /wp-content/themes folder, say behindthedoorwines,
and create a single file called style.css with the following content: (or whatever is relevant for your current theme – don’t just blindly copy the following!)

/*
Theme Name: Twenty Ten Child
Theme URI: http://wordpress.org/
Description: Child 2010 theme for WordPress.
Author: the WordPress team
Template: twentyten
Version: 1.3
License: GNU General Public License
License URI: license.txt
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
*/

@import url(“../twentyten/style.css”);

@import url(http://fonts.googleapis.com/css?family=Fontdiner+Swanky);
====================================================

Ensure that the Template: line references your current theme.

See the @import lines next. The first just keeps all the current style stuff intact, and this new style.css file will override anything in the original.

The next lines (see my example) allow you to reference some new fonts from the Google Web Fonts – the website I’ve grabbed this from (one I developed this child theme for) uses the Fontdiner Swanky font, as you’ll see from the…
@import url(http://fonts.googleapis.com/css?family=Fontdiner+Swanky);
line.

Then, find all references throughout your parent style.css file, and replace references to the current font with the one from the child theme…. ie:

#access a {
color: #91c945;
display: block;
line-height: 38px;
padding: 0 10px;
font-family: “Fontdiner Swanky”;
/* text-decoration: none; */
}

or wherever a font-family definition exists in the parent style.css file – just override it with the new font name.

Sounds terribly hard, but its not when you get the hang of it.

(Or you could just get Steve Davis to change it for you! :))

Cheers
Brad