A great way to give your website a pro design and make it standout from the crowd is to use custom fonts for your headings. One way to display custom fonts is to replace the default heading text with an image file. For example, if you go to our demo site for Layout 6, you'll notice we use an image for the Latest Updates heading on the homepage. Here's the image file that we used:
If you've upgraded to "Advanced Designer" and now have access to our advanced CSS Editor, you can very easily do the same thing on your website by using some custom images and CSS code.
In this working example, we'll use the above image to customize the Latest Updates heading.
1. Create the Image
Using your favorite web graphics program, such as Photoshop or Fireworks, create an image file that displays the heading text using your custom font.
We suggest using a transparent background (or canvas), so you don't have to worry about matching it up with the background colors on your web page. If you go with a transparent background, export (save) the image file using the GIF file format and make sure you select "Index Transparency" to preserve the transparent background across all major browsers.
Of course, you don't have to use a transparent background. If you don't, just remember to match up the background color with the same color used underneath the heading on the web page where you'll be placing this image.
At this point, make note of the Height and Width of the image in pixels. For example, the Latest Updates image above has the following dimensions: Height = 49px and Width = 326px. You'll need these dimensions later when you add your CSS code to the CSS Editor.
2. Upload Your Image into FourFour
You now need to upload the image you just created from your computer into FourFour so you can use it on your website. Login to FourFour and go to Website > Layout & Design > Image Manager. Click the "Open Image Manager" button, upload your image file, and then click on the thumbnail of the image after it's been uploaded. The popup window will automatically close and you'll be returned to the main Image Manager page, which now displays a URL pointing to the new image you just uploaded.
Make note of this URL so you can copy/paste it into your CSS code later on.
For example, here's the image URL for our Latest Updates heading:
3. Update Your CSS Code
Now that you've created a custom image and have uploaded the file into FourFour, you just need to update your CSS code to display it on your website.
Go to your advanced CSS Editor (this link only works if you've upgraded to "Advanced Designer").
If you're not already using the CSS Editor to control the design of your site (because you're using our basic Colors, Font & Background editor), then you'll see the following alert on the top of your page:
Your website is not using CSS Editor to control the design. The design is currently using Colors, Font & Background. If you Save the settings below, you will change over to CSS Editor.
IMPORTANT: If you haven't saved CSS Editor settings before, then you'll notice that we've automatically copied over all of your settings from Colors, Font & Background. This makes sure that when you switch over to CSS Editor for the first time, you'll start from where you left off in Colors, Font & Background. Make sure you don't delete this CSS code if you want to preserve these settings. Once you save the CSS Editor for the first time, from that point onwards your Colors, Font & Background and CSS Editor settings will be maintained independently of one another, and, therefore, you'll need to update each editor separately if you switch back and forth.
Scroll to the bottom of the CSS code that's displayed in your CSS Editor's textarea field and copy/paste the following code into it:
The first CSS statement removes the display of your default Latest Updates text using #latest-updates .page-header as your CSS hook. The second CSS statement inserts your new image into the background of the #latest-updates container and positions it at the top left.
You must update the above CSS code as follows: 1) replace the 60px value of the padding-top: property with a pixel value that comfortably exceeds the height of your image (this will create space for the image to display properly above your Latest Updates posts); and 2) replace the YOUR-IMAGE-URL placeholder text inside the parantheses of the background: property with the URL for your new image (the one you uploaded into the FourFour Image Manager in Step 2). If you don't have a copy of this URL handy, just go back to Website > Layout & Design > Image Manager, click the "Open Image Manager" button, click on the thumbnail of your new image and grab a new copy of the URL that is returned.
You can add your image's URL as either an absolute path (i.e. http://demo6-tpl.fourfour.com/media/images/layout/hdg-latest-updates.gif or a relative path (i.e. /media/images/layout/hdg-latest-updates.gif).
And remember, your URL will not use demo6-tpl.fourfour.com as its domain, but, instead, it must use your own domain.
There you go...an easy way to use our "Advanced Designer", a little bit of CSS code and our FourFour Image Manager to replace default heading text with custom fonts. Enjoy!