The Stallion Responsive Theme fonts can be changed in two ways.

Via the Stallion Responsive “Color Scheme CSS Inline Creator” (options page under Appearance for changing fonts colors AND font types inline) or via the “Font Scheme CSS File Creator” (options page under Appearance for creating new font scheme CSS files).

The former is inline CSS, for quick minor font type and color modifications, the latter is for changing the entire font selections (creates a new CSS file).

Access the Stallion Responsive Colour and Font Scheme features under

“Stallion Theme” >> “Color Options” : “Color Scheme CSS Inline/File Creator Selector”

“Colour Scheme CSS Inline ON” = Use an inline version for creating font colors AND font types.
“Colour Scheme CSS File Creator ON” = Use the CSS file version, creates and saves new color scheme CSS files (only for font colors, NOT font types).

And for font types:

“Stallion Theme” >> “Color Options” : “Font Scheme CSS File Creator”

“Font Scheme CSS File Creator ON” = Use the CSS file version, creates and saves new color scheme CSS files (only for font colors, NOT font types).

Tutorial needs updating: after writing this article the font part of the feature was split into a separate feature so font colors and font types could be created independently (resulting in many more combinations).

Both features use the same options for fonts, every part of a Stallion Responsive site can have it’s colours and fonts set by the site owner, if you want a weird font for your comments it’s possible without fully understanding CSS (or PHP), the options pages are a set of boxes for setting colours and fonts. On this page I’ll be dealing with setting fonts only, there’s currently 36 elements that can have their fonts set.

Stallion Responsive Theme Fonts that Can Be Changed

Stallion Font CSS
Main Font
Head Home Link Anchor Text
Head Tagline Text
Navigation Menu
Main Content Large Heading Text
Main Content H* Post Links Anchor Text
Main Content Date Area
Main Content
Main Content H1 and Comment H1
Main Content H2 and Comment H2
Main Content H3 and Comment H3
Main Content H4 and Comment H4
Main Content H5 and Comment H5
Main Content H6 and Comment H6
Main Content Blockquote
Main Content Blockquote Cite
Main Content Code
Main Content Pre
Main Comment Button Links Anchor Text
Author Biography Box
Comment Main Headings Text
Comment Form
Comments
Comment Title Text (Comments with Titles)
Comment Blockquote
Comment Blockquote Cite
Comment Code
Comment Pre
Widgets
Widget Heading
Tagcloud Widget Links
Gallery HoverOver Caption
Image Caption
Footer Area
Featured Slider
Next and Previous Links

Setting Theme Fonts

Setting fonts within the Stallion Responsive Theme Colour CSS Selector or Colour Scheme CSS Creator can be a little confusing because there’s so many ways font CSS code can be generated and if you mix the formats you can get unexpected results. For this reason it’s advisable to always use the same format and list all 5 font properties even though in theory you could list as few as one (ie just font-size).

Stallion Responsive CSS files use the following CSS rule format:

font-style font-weight font-variant font-size/line-height font-family

Example CSS rules
normal normal normal 100%/120% Arial, Helvetica, sans-serif
italic normal normal 100%/120% Georgia, 'Bitstream Charter', serif
normal bold normal 135%/110% Arial, Helvetica, sans-serif

The code above is what you enter into the Stallion Responsive options page, the output adds font: and ; to form correctly formatted CSS rules:

Stallion Responsive Theme Fonts

Stallion fonts can be set on the CSS Creator Options page…

font: normal normal normal 100%/120% Arial, Helvetica, sans-serif;

The above code is what the CSS rules look like in the CSS file.

To understand these font rules let’s break down an example

italic bold normal 135%/110% Arial, Helvetica, sans-serif

This means

italic – font-style : it’s italic text.
bold – font-weight : looks thicker/bolder than normal).
normal – font-variant : unlikely you’ll need to change this, it’s different font versions for dropdown menus etc…
135% – font-size : the text size is 135% of ‘normal’, setting to % means a user can resize the text via their browser which is good for usability.
110% – /line-height : that’s 110% of whatever the font-size is, this means the line height is 10% taller than the actual text, though some elements like headers already have extra large line height, so you might not get exactly what you’d expect. Also if the text has a border (like the widget headings) you’ll need to set quite tall lines so the borders aren’t hugging the text.
Arial, Helvetica, sans-serif – font-family : the browser will look for Ariel, if it’s not on the system it looks for the other fonts.

To prevent confusion it’s recommended to use the same format, you’ll see on the Stallion Responsive options page the defaults all use the same format.

This is not the only way to generate fonts within the theme options page, but the format (italic bold normal 135%/110% Arial, Helvetica, sans-serif) works.

If you set all five font options it works every time, miss one option (for example “italic 100% sans-serif” which is missing font-variant, font-weight and line-height) in theory should work, but depends which font box it’s added to (sometimes it works, sometimes not), so best to always add all five options.

That being said if you want to experiment with different formats below are most variants that can be used to build fonts, be warned before I used the above format I tried mixing different formats I know work when added to CSS files in particular circumstances, but there’s so many font options working and clashing together in Stallion (so we have full control) I didn’t get consistent results (wasted hours trying different formats).

Font Property Options

The five font properties that can be set, are (in order): font-style font-weight font-variant font-size/line-height font-family.

font-style – overall styling like italic
normal – normal font style
italic – italic font style
oblique – oblique font style
inherit – inherited from the parent element

font-weight – how thick characters should be
normal – normal characters
bold – thick characters
bolder – thicker characters
lighter – lighter characters
inherit – inherited from the parent element
or 100, 200, 300, 400, 500, 600, 700, 800, 900 from thin to thick characters. 400 is the same as normal, 700 is the same as bold

font-variant
normal – normal version of font
small-caps – small-caps version of font
inherit – inherited from the parent element

font-size/line-height
font-size – size of characters
xx-small – xx-small size
x-small – extra small size
small – small size
medium – medium size (default)
large – large size
x-large – extra large size
xx-large – xx-large size
smaller – smaller size than the parent element
larger – larger size than the parent element
length – fixed size in px, cm, etc.
% – percent of the parent element font size
inherit – inherited from the parent element
line-height – height of each line of text
/16px
/20px
/1.4em
/1.5em
/2.0em
/90%
/200%
etc…

font-family
serif
sans-serif
monospace
etc…

A font family can also be a list of fonts (a family) a browser will try to load from left to right, for example if you set a font family to ‘Times New Roman’, Times, serif and the ‘Times New Roman’ font is missing from a users system the browser will try to load Times, if that is missing it will look for the serif font. It is therefore important to set the last font to something all systems will have access to like serif, sans-serif or monospace (there are others that are common to most systems).

There are many font lists online below are a few common examples.

Common Web Safe Font Family Combinations
Serif Fonts
Georgia, serif
‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif
‘Times New Roman’, Times, serif

Sans-Serif Fonts
Arial, Helvetica, sans-serif
‘Arial Black’, Gadget, sans-serif
‘Comic Sans MS’, cursive, sans-serif
Impact, Charcoal, sans-serif
‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif
Tahoma, Geneva, sans-serif
‘Trebuchet MS’, Helvetica, sans-serif
Verdana, Geneva, sans-serif

Monospace Fonts
‘Courier New’, Courier, monospace
‘Lucida Console’, Monaco, monospace

Double Quote or single Quote Fonts

For multiple word fonts like Times New Roman please surround with single quotes ‘Times New Roman’ NOT double quotes “Times New Roman”. You will find most online font-family lists will use double quotes “font-family”, but the Stallion Responsive options page doesn’t play nice with double quotes so always use single quotes.

If you aren’t familiar with adding quotes around fonts, the rule is any font with white space (like Times New Roman) is surrounded by quotes (“Times New Roman” or ‘Times New Roman’), single word fonts and hyphenated fonts (sans-serif for example) do not require being surrounded by quote.

David Law

David Law > AKA SEO Dave
*
: 20+ Years Experience as a Freelance SEO Consultant, WordPress SEO Expert, Internet Marketer, Developer of Multiple WordPress SEO Plugins/SEO Themes Including the Stallion Responsive Theme.

Website - SEO Gold