So, you’ve designed your website in Photoshop. It’s looking great -the logo is eye-catching, the navigation is easily understood, and your headings look amazing. Now its time to convert your design into a functioning website. Sounds simple, right? Maybe not.
There is no doubt that Photoshop is a great tool for designing websites, but unfortunately, not all designs made within the program can be easily transformed into working webpages. This is especially true for designs using non-standard fonts.
You have to remember that just because you’ve downloaded and installed the perfect font, doesn’t mean that your visitors will have done the same. In reality, the majority of your visitors won’t be able to display any non-standard fonts, meaning they won’t be able to see your website in all its glory.
Now, you could post a link on your website asking your visitors to go and download the specific font in question, but odds are, most won’t be bothered. Not to worry, however, because you can still make your website appear just the way you want it to while using those same unique fonts.
Here’s the catch – it’s going to take a little extra effort on your part. Luckily, the solution is simple and relatively painless. All you need to do is create image files to replace your textual headings. Displaying an image file on your webpage will preserve any non-standard fonts and display them correctly in all browsers, regardless of whether or not your visitors have the particular font installed.
You may be asking yourself, but won’t use images instead of text hurt my rank in Google? Not really. As long as the bulk of your website’s content is still written in standard text, you should be fine. Be sure, however, to add alt text to each of your images so that Google can still index the text within your header images. This will also make it possible for the visually impaired to easily read your headings.
As you can see, designing websites with headings that use non-standard fonts isn’t all that difficult. By simply converting your textual headings into graphical images with alt text, you can still use any font that you wish, without worrying that your visitors will not be able to display them correctly.
