Site title font adjustment – small pointer request

[John Bourke]

I want to change the font used for the site title so it matches the look of our corporate font. However, I’m 10 years rusty on html and css and new to WP so I’m having trouble. Your tutorials (great help by the way) talk about either editing the CSS in a child theme (already installed) or using a plugin like WP Google Fonts.

The challenge I face is the plugin only offers options for body, h1 to h6, blockquotes, paragraphs, and lists. If I look at the CSS (which would be my preferred way to make the change as I only want this one change), I think the code you have that relates to the site title font is:

@font-face {
font-family: ‘raleway’;
src: url(‘fonts/raleway-regular.eot’);
src: url(‘fonts/raleway-regular.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/raleway-regular.woff’) format(‘woff’),
url(‘fonts/raleway-regular.ttf’) format(‘truetype’),
url(‘fonts/raleway-regular.svg#ralewayregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

#cir-site-title {
font: normal 2.313em/1em raleway;
margin: 3px 0 0;

…but the example information Google have on how to add a fond to the CSS is quite different:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

…not similar enough to enable an easy cut and paste. To make the change, would I be correct to add:

@font-face {
font-family: ‘ChosenFONT’;
src: url(‘fonts/ChosenFONT-regular.eot’);
src: url(‘fonts/ChosenFONT-regular.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/ChosenFONT-regular.woff’) format(‘woff’),
url(‘fonts/ChosenFONT-regular.ttf’) format(‘truetype’),
url(‘fonts/ChosenFONT-regular.svg#ChosenFONTregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

to call the font and then:

#cir-site-title {
font: normal 2.313em/1em ChosenFONT;
margin: 3px 0 0;

to implement it?
Thanks, John

[John Bourke]

If I omit the @font-face stuff and just insert the following in the child’s CSS it seems to work:

#cir-site-title {
font: normal 1.8em/1em ChosenFont;
margin: 2px 0 0;}

[Sushil Adhikari]

Correct on the last part….you also have the option with WP Google Fonts which you are not limited to their preset selectors. When you choose your font from it, it has a text area field labeled as: Custom CSS (optional): This is where you would add something like:

#cir-site-title {font-family: yourfont;}

Still would be better if you are using the child theme and the @font-face method (no plugin required then). Just make sure the font files are added to the child theme and the path of your child theme’s style.css points to them correctly. Best way is to put the fonts in a “font” folder in your theme like the parent theme has.

[Sushil Adhikari]

Follow up to your last post… if you have the font on your computer, you will be the only one who sees it. So it won’t work unless you have the font embedded in your theme or at least linked to the font by way of Google’s methods.

[Author]

Posts