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
- Walk through article on how to use Type Kit with our wordpress.com blogs
- 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.
Related articles by Zemanta
- Customize your blog with Typekit fonts (everything.typepad.com)
- TypeKit Comes to WordPress.com (onecoolsitebloggingtips.com)
- How to change font size in your browser
Lydia
February 7, 2010
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.
timethief
February 7, 2010
@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.
wordpress themes
February 10, 2010
I like this blog..Very useful.
timethief
February 10, 2010
Thanks.
Michelle
February 10, 2010
Thanks for the info. I’m trying to change the font color for my URL links in wordpress. Any idea how I do that?
timethief
February 10, 2010
@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/
Habibillah Faqih Arif
February 12, 2010
Very useful, thanks
timethief
February 13, 2010
Thanks for the feedback. :)
Vince
February 15, 2010
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.
timethief
February 16, 2010
Thank you so much for the kind words. Come again soon. :)
chrishealy
June 3, 2010
please , can someone tell how to restore the typekit fonts in my wordpress blog to the original wordpress fonts…?
timethief
March 2, 2011
You have been answered in the support forum.
gailsserenity
August 2, 2010
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.
timethief
August 2, 2010
@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.
gailsserenity
August 2, 2010
Thank you for you good wishes and I am doing fine without all the different fonts.
I’m sorry I wasted my time and money. But I’m over it.
Lanna
March 2, 2011
Hi Timethief,
I find your post very useful. Thanks a lot for writing it up here.
I’ve written a similar post that is related to
How to Change the Font for Your WordPress.com Blog?
This will answer the question that @chrishealy has asked. Check it out. What do you think?
timethief
March 2, 2011
This is an older post and I know the question has been answered in the support forum. Thanks anyway.
P.S. I have now visited and read your post and backlinked to it in mine above. :)
Lanna
March 3, 2011
Thanks so much! Yous site has a lot of informative stuff too. I’ll visit often… Cheers. :)
timethief
March 4, 2011
You’re welcome and the welcome mat is always out. :)
smilingsun08
September 17, 2011
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 :)
timethief
September 17, 2011
You go to the Flag counter wesite and get the code for your blog and copy and paste it into a text widget which you place in your sidebar.
smilingsun08
September 17, 2011
Ahh man, you have been awesome !! Thank u so so much :D
Hahaha, I never thought about it … :D
Danke :)
timethief
September 17, 2011
You’re welcome.
smilingsun08
September 23, 2011
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 …
timethief
September 23, 2011
Please reply to Staff nickmomrick in this thread. http://en.forums.wordpress.com/topic/are-there-format-or-administrator-drop-down-changes-taking-place-right-now/page/2?replies=60#post-704504 He says it’s a bug. That means you need to report it to Staff.