August 11, 2011

Customizing the Default Post Font with CSS

Note: This tip requires the use of Custom CSS, a feature available to our Pro Unlimited plan and above.

Let's say you've selected one of Typepad's professionally designed themes but you want to change the font used in posts, either the type, color or size, or all three. Rather than setting this on a per-post basis with the Compose editor, you can use Custom CSS to change the font across all of your posts with one bit of code.

At Design > Custom CSS, you can add code similar to:

.entry-content, .entry-more {
    font-family: georgia;  /* choose a font */
    font-size: 15px;      /* enter the size */
    color: #000;          /* enter a color */

The above code works for the Mosaic and some other themes. You may need to make adjustments depending on the theme selected for your blog.

The font family, color and size can be edited to suit your needs. You'll want to choose a font-family that's common on all or most computers. Please see this list of common fonts for suggestions.

Notes: If you've already edited the text in your posts, the CSS won't override those customizations. The font will only apply to post text that hasn't been otherwise formatted with the editor. You can still change the font on a per-post basis if you wish. The CSS above will just set a new, custom default post font. You can change or remove the CSS at any time by going back to Blogs > Design > Custom CSS.

Below is a before and after using the CSS above and the Mosaic theme. (Click images to enlarge.)

Defaultfontcssbefore Defaultfontcssafter


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Typepad Services badge