Changing fonts in WordPress.com blogs

fontsYou 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:

fonts accessibility

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. However, though inline CSS can still be used to make changes like those within posts, it can create a lot of work if, and if you switch the theme on a blog you can suddenly find that all of that inline formatting looks off. Customizing things like fonts and colors globally within the theme, using custom design, makes it easier to make changes and switch themes down the road. For users who’d still like to make those inline changes, the resources at the end of the Advanced HTML page include information about using inline CSS for formatting

(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. –

(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.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

27 thoughts on “Changing fonts in WordPress.com blogs

  1. Is there a way to change the typeface in my wordpress.com blogger editor from “Georgia” to “Arial? I can change the typeface in my blog advanced options but I would like to change “Georgia” typeface to “Arial in the editor itself. Is this possible and if so can you tell me how it is done? Thank very much.

    • Hi John,
      The Visual editor usually displays the same font no matter what the theme, unless you are using one of the rare exceptions like Twenty Eleven. I do not know of any way to change the font displayed in the editor but maybe another Volunteer or Staff do. Will you please post to that question to the support forums? Here’s the link http://en.forums.wordpress.com/?new=1

  2. Hey TimeThief,
    I want your help yet once again.
    I wanted to know something about “Media Library”.
    The problem is, I lose space even if I delete the files.

    Let me explain it to you …

    When I upload an image to just experiment if it looks good for the background, and suppose I am not satisfied, I delete the file(s) from the “Media Library”. But, I am shocked to see that even though I have deleted those files, I have lost some storage space in the process. Can you explain how I can get it back ?? [Although, its not such a big problem now, but it may be so at a later point of time!]

    Thanks in advance …

  3. Hey Timethief,
    Hehe :D, although this question isn’t regarding “Changing fonts”, I would like to know how I can use the “Flag Counter” widget (as in ur website) in my wordpress blog.

    I hope you can help :)

  4. I think this is too complicated for me. I don’t get it at all. I am not that unhappy with my Blog the way it is. I am spending too much time trying to figure out how to use Typekit.
    Thanks for your information. I must admit that obviously I’m not a techie.
    I do think Typekit should have made it CLEAR that you need to know HTML and CSS before you buy Typekit.

    • @Gail
      I’m sorry you spent your time being frustrated and not succeeding. I don’t think that you are alone when it comes to feeling that the coding aspect should have been made clear. I hope you have fun with your blog and don’t experience any more frustration. Thanks for the comment.

  5. please , can someone tell how to restore the typekit fonts in my wordpress blog to the original wordpress fonts…?

  6. This is very good information, especially for those of us who are new to the world of blogging and WordPress. Thanks for sharing your knowledge and you have an excellent blog.

    • @Michele
      We cannot access the underlying templates for our themes at wordpress.com and edit them. This is because wordpress.com is a wpMU (multiuser) blogging platform and that means all bloggers using the same themes are using the same templates. If we could access and edit those files then imagine what would happen. Every blogger who had the same themes would find all their links had been likewise changed. See > http://en.support.wordpress.com/themes/editing-themes/

  7. Timehthief,

    Thank you for this information. I’ve been blogging on 3 blogs now for almost 3 years and I wasn’t aware of the intricacies regarding fonts. I often like to explore using different, uncommon fonts but go right back to the normal default fonts on the blogging editors. WordPress is a little more versatile when you think about it than Blogger.

    Again, thank you.

    • @Lydia,
      I don’t think most bloggers are aware of these variations in font display and what underlies them. I happen to love calligraphic fonts because I’m into calligraphy myself but once I became a blogger I learned the font realities and accepted them. During the winter break I also had several opportunities to see how my blogs displayed on iphones, notebooks, and on computers with different monitor sizes and with different screen resolutions. What an eye opening experience that was.

Comments are closed.