Change Site Fonts

From HostBaby Wiki

Please only give this a try if you are comfortable editing, copying, and pasting code!

You can use a little bit of the styling code called CSS to modify the fonts you are using for your site. CSS is the type of code we use behind the scenes to tell browsers how your site should look.

Here's how to try out changing the fonts on your site:

In your wizard administration panel, under settings, there is a box called "head."

That box will insert your new code into the header area of each page of your template, and that will help you overwrite some of our standard CSS.

Example code to change a font:

<style> body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 15px; } </style>

That tells the template that anywhere in the body of the template, the font should be Trebuchet MS (that one has the quotes around it because the font name is two words), but if that font isn't available, it can try arial, and if that's not available, then helvetica, and if that's not available than basically any font that is sans-serif. Then it says the font size should be 14 pixels high and that the space between each line should be 15px.

Bear in mind -- you will want to stick with "standard fonts" -- meaning, fonts that come factory-installed on both Mac and PC computers. If you use a font that you download and love, then the chances are good only YOU will see it. The user must have the font on *their* computer in order to see it. Here is a list of common fonts to all Mac and PC computers:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Remember that you can simply remove that CSS font code from the head box in your settings area, if you want to remove your changes.

As always, if you get stuck somewhere while trying this out, give us a call or send an email and we'll be happy to help you out!