Blog Tips: Changing Your Fonts
There are a limited amount of fonts you can use for the main content of your blog. If you see fancy fonts on a blog or website, they are likely a Flash file or a JPG of the font.
To change your font, locate your stylesheet.
For WordPress
In the admin section, Appearance/Editor, your file might be called “stylesheet.css” or some other “.css” file. If there are more than one, open them all and you’ll be using the longest one.
For Blogpsot
In the admin section, under Layout/Edit HTML, your stylesheet is hardcoded all in one page with the blog. The styles are held at the top of the page between <style> tags {You can use Layout/Fonts and Colors, but you’ll be limited to six fonts}.
Find any reference to “font-family:” in your stylesheet. In Firefox, I like to use the Edit/Find function to find pieces of code, but you can manually look if you’d like. If there is a list of several fonts, like this “font-family: Century Gothic, Trebuchet, Arial, sans-serif;” it is saying this: “Use Century Gothic. If the user doesn’t have Century Gothic installed, use Trebuchet. If the user doesn’t have Trebuchet installed, use Arial, and if the user doesn’t have Arial installed, use a sans-serif font they do have installed.” Replace the first font with the one you’d like to display. Below are a list of web-safe fonts and how to add them.
**Just to be safe: copy and paste the entire code of what you are working on, into Notepad or Textedit, in case you forget a semi-colon, or something goes terribly wrong, you can put the old code back in a try again. Just a caution. You can’t miss a character or it won’t look correct and may break your page.**
font-family: Arial, sans-serif;
font-family: ‘Arial Narrow’, Arial, sans-serif;
font-family: ‘Arial Black’, Arial, sans-serif;
font-family: ‘Courier New’, courier, serif;
font-family: Georgia, serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: “Lucida Console”, serif;
font-family: Verdana, Arial, sans-serif;
font-family: ‘Trebuchet’, Arial, sans-serif;
font-family: ‘Tahoma’, Arial, sans-serif;
font-family: ‘Palatino Linotype’, Palatino, serif;
font-family: ‘Impact’, Arial, sans-serif;
font-family: ‘Gill Sans’, Verdana, Arial, sans-serif;
font-family: Copperplate Gothic Light, Copperplate, serif;
font-family: ‘Century Gothic’, Verdana, Arial, sans-serif;
If you want to show more than one font
You can have different fonts for your titles and for your body copy. Look around in the stylesheet for any instance of “font-family:”. The titles of your posts are probably an H1 style. If there is no “font-family:” in your H1 style, add the entire line that you see above, and don’t forget the semi-colon!
If you are bored of these fonts
Try making them bold {font-weight:bold;}, or making it larger {font-size:30px;}, or making it all caps {text-transform:uppercase;} or changing the color {details in the next tutorial}.
Hope this helps!
images from webdesigndev.com.