How to Display Sample Fonts on a Web Page
Fonts are the particular styles of type that words are presented in and they range in endless formats, from types like "Courier" that feature traditional typewriter print to others like "Webdings" that appear as icons. Not all computer monitors present the same types of font faces, which makes it difficult to display them on a web page; however, you can overcome this obstacle by creating graphic files to capture your sample fonts and publish them so they show up as intended.
Other People Are Reading
Things You'll Need
- Graphics application, such as Fireworks
- Web server
- HTML text editor, such as Dreamweaver
- Web page
Instructions
-
-
1
Launch a graphics application, such as Fireworks, and create a new file by selecting the "New" option under the "File" menu. Select "Transparent" as the canvas color background, which is usually presented to you in a dialog box after you create a new file.
-
2
Choose the sample font that you want to publish on a web page by selecting the desired type option from the "Formatting" or "Properties" menu. Use a "text" tool to type the desired letter or word and go back to your application's "Formatting" or "Properties" tool to specify any display requirements like size, color and spacing. Access the "Help" menu in your graphics program if you are unsure of how to perform these edits.
-
-
3
Name and save your files as a PNG, GIF or JPG by using the "Save As" function to select the extension from the format menu. It is best to choose a PNG or GIF to keep your file sizes smaller so they load faster on a web page, but if you have any enhancements like digital photos, choose the JPG option.
-
4
Place your font graphics on a web server in the same folder or directory that you keep your web page files to ensure that the graphics display on the web page.
-
5
Use an HTML text editor, such as Dreamweaver, to open your web page file and place your cursor in the area on the page where you want the fonts to appear.
-
6
Use your text editor's "Insert" function to add the images of the fonts. Select the files from the dialog box that automatically appears and click a button like "OK" when done. This option is generally found on the main toolbar of your application, but if you cannot find this feature, you can enter the location of the image file in the HTML code like the following example:
<img src="http://www.yourdomain.com/font.gif" />
-
7
Save your web page file and place it on your web server in the same location where you stored your font files to publish your web page with the sample fonts.
-
1
Tips & Warnings
Try to keep your font file sizes down to one megabyte or less so that your web page does not take a long time to load.
