Intro to Web Fonts in Dreamweaver

No longer to we have to live with boring typefaces for our websites. We used to have to place images in our sites for custom typography, which didn't work as well with SEO and good web practices. We didn't have a choice in the matter, until recently when the method of using web fonts was developed. Now you can incorporate web fonts in all of your Dreamweaver sites with just a little CSS know-how. Custom web fonts can make everything on your site pop a little more, including your Dreamweaver menu. The sample image below shows a basic site that uses the default fonts available. They are simple and do their job, but we can import custom fonts fairly easily.

Dreamweaver Site Without Web fonts

However, before we begin with Dreamweaver, we need to download a web font pack to use in our site. There are other methods for using custom web fonts out there, but this one involves embedding the font within your site. A popular place to find free web fonts to use in your site is FontSquirrel.com. They have a plethora of choices available, and they even provide the web font packages for you to use in your file structure. Click on @fontface Kits to bring up a page with all of their available @fontface Kits for you to download. They are broken down into category to make it easier to find the one that you are looking for.

FOnt Squirrel web fonts to use in Dreamweaver
FontSquairrel web font kits to use in Dreamweaver

I chose Coda and when you choose your font, click on Get Kit, in which the kit will automatically download to your computer. The file will be zipped, so double-click it to unzip it, because you will need to point to its contents shortly.

Jump back over to Dreamweaver and go to Modify> Web Fonts. A dialog box will come up, asking you what you want to do. Click on Add FOnt and another dialog Box will open, asking you what you want to call the font. Under the name, there will be fields to upload the different formats of web fonts, such as EOT, woof, etc. Click the folder icon and select the font that it is asking for, which is the EOT format. If the rest of your files are included in the same folder(which they should be if you downloaded them from Fontsquirrel), Dreamweaver will detect this and automatically import the rest of the fonts.

Fonts manager for Dreamweaver
Add web fonts into Dreamweaver

Dreamweaver automatically imports the fonts and places them inside of a folder titled "web fonts". If you select an element within your html and go to the properties panel to choose the font, Coda will now be among the list. Click on it, and Dreamweaver will automatically add it to your linked CSS stylesheet, using the file structure. Notice that it imports your file via linking another stylesheet. The only downside to this is that Dreamweaver doesn't specify any fallback fonts just in case they aren't supported. You will have to add those yourself.

Dreamweaver adds font files
How dreamweaver handles web fonts
The css for Webfonts within Dreamweaver

Conclusion

Dreamweaver has integrated the ability to include your own custom web fonts in your website with just a few clicks. Adding these fonts make them selectable options within your menus, so you can add beautiful fonts to your websites without coding. The result is shown below, with the H1 tags style with the Coda Font.

Webfont shown in Dreamweaver site