Integrating the Look of Your Blog & Website

Users are most comfortable when they are on the same site. Consistency builds trust among your visitors. There are many ways you can give visitors visual clues that they are still on the same site.

These methods include:

• Using the same fonts
• Choosing the same colors for backgrounds, content, and navigation
• Offering the same navigation bar on each page
• Matching the title of the new page with the navigation link they clicked
• Providing the same layout structure on every page

We've already taken care of the navigation. In this section, we are going to match the colors and fonts of Georgia's main website to her blog for a more consistent feel. We are going to do this by copying the CSS styles from the website. We will then transfer them to the template of the blog.

Using the Same Fonts:

There are two ways the fonts can be transferred from a website to your blog. The first method involves no coding or template editing. You can set the font on different areas of your blog template using the Layout Fonts and Colors page. The six potential fonts are Arial, Courier, Georgia, Times New Roman, Trebuchet, and Verdana. These are all proven web fonts. When you want to use a different font, such as Myriad Web, you will need to specify it in the template of your blog. Let's edit the template in order to transfer the font from Georgia's site to her blog.

Time for Action!—Transferring Fonts from a Website:

We will add a new font variable tag to our template that can then be edited from the Fonts and Colors section under the Settings tab of our blog.

1. Open up the external CSS file of your site or look for an inline style tag or a font tag. The style tag or class for a font should look similar to this: fontfamily:" Myriad Web". A font tag will look like this: . Carefully copy and paste the name of the font, also known as the fontfamily or font-face into a text file. Georgia's website is using "Myriad Web", a web safe font that is not one of the font choices in Blogger.

2. Navigate to Layout Edit HTML to open up your blog template. Wherever you find the current font in the blog, replace it with the new font.

3. Continue replacing the font in the variable tags and the CSS styles. Save the template and take a look. The titles are now easier to read and have a modern look.