You may not like the fonts supplied your wordpress.com theme but it’s important to know that regardless which fonts you may wish to choose to jazz up your blog with, your browser and your visitors’ browsers can only use the fonts installed in the same computer. Obviously not every visitor to your blog will have the same fonts installed in their computers as you do on yours, so you can immediately see that problems will arise unless you choose to use common fonts.
If a reader does not have a specific font installed on his / her computer, the browser will determine which font is displayed. There are a very limited number of fonts (in English/Western languages) which are common for most operating systems/computers/browsers.
Online resources for making font style and size choices
Browser News is certainly worth a visit. The site provides information about fonts in web pages including User Default Fonts; Generic Fonts; Common Fonts; Similar Fonts; Choosing Fonts; Downloadable Fonts; and Samples of Fonts.
Choosing fonts is frustrating, especially for those used to print media, since there are so few choices: a browser can only use fonts installed on a user’s PC, no font is installed on all PCs, few fonts are commonly installed, and many fonts don’t look good on PC displays. Designers are therefore limited to a paltry few common fonts.
The challenge is to find a way to select and size fonts without sacrificing the user’s ability to adjust his or her reading environment. In his article, How to Size Text in CSS Richard Butler reveals a best practice that satisfies designers and users and works across browsers and platforms.
If you want a preview of how fonts are displayed in operating systems or browsers other than your own, then please check out Common fonts to all versions of Windows & Mac equivalents.
Also read the excellent information provided on the WebAim – Web Accessibility in Mind site, including:
Changing fonts on wordpress.com blogs
There is more than one approach you can take to increase font size on wordpress.com blogs. That being said, do be aware that we can all increase the font size of any webpage we are reading in our browsers, so you may not think that using TypeKit Fonts or purchasing a CSS editing upgrade is worthwhile.
(1) Changing font colors and size on posts or pages either post by post or page by page
We wordpress.com users can change font styles and colors on our posts and pages, manually in the HTML editor a post and a page at a time.
(2) Changing font colors
We can also use the number 4 icon in the Visual editor to change font colors.
(3) Changing font styles (families) throughout the whole blog by using TypeKit Fonts
Most of the configuration between Typekit and WordPress.com happens automatically. For fonts to show up on your blog, WordPress needs to know the Kit ID of your account here on Typekit. You can do that by opening up the Typekit Editor and clicking on Embed Code. Copy the Kit ID and paste it in the appropriate place in the WordPress.com dashboard. –
- Using Typekit on WordPress.com blogs
- How to Change the Font for Your WordPress.com Blog
- Improving Bueno via Typekit
- WordPress.com forum search results TypeKit Fonts
(4) Changing font style (families) and color throughout the whole blog by CSS editing
We cannot access the templates in our wordpress.com blogs and cannot edit the underlying php and html in the theme template. However, if we choose to pay for a CSS upgrade and undertake CSS editing then we can change font styles and colors throughout the entire blog. However, this upgrade is NOT recommended to those who do not have CSS editing experience as there is no Staff support, and only couple of volunteers currently choose to expend their time and energy on helping others learn CSS editing.
Note: Change font in header image
If you have a theme with the customizable header option, you can change your customizable header on your wordpress.COM at any time, and use a free font or one you purchase of your own choice to place your blog title and tagline on the image. However, if you have edited the CSS for your theme you will not longer be able to use the image uploader. Your header image must be linked to in the CSS stylesheet.
Once you have the CSS upgrade, you have to size your images exactly to the size needed, and then upload them to the Media Library directly instead of using the header image feature. Upload it directly to the Media Library at Media Library > Add New. Then copy the URL of the image from the grey field at the bottom of the pop up window after the image has uploaded and insert that URL into the #pic background declaration in the CSS.
Updated October 6, 2013.