How to use YOUR OWN fonts in Creative DW Image Show PRO

Using original fonts in your banners on the Web can be a pretty difficult job, isn’t it? Well, not anymore, as Creative DW Image Show PRO has a very cool feature which allows users to import any font they want in their shows. Hence, our product gives you absolute freedom as concerns the images and fonts you could use, allowing you to create banners without restricting your creativity and originality.

The only requirement there is for using any font you want is to have Adobe Flash (8 or higher) installed. What we will do is to export some “.swf” files using a tool which is distributed freely for Creative DW Image Show PRO users; afterwards, the font can be imported from the product’s interface in Dreamweaver.

Before we get started, I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative DW Image Show PRO and the Export Fonts Utility extensions installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.


Click here to download the required files for solving this tutorial.


1. Open Dreamweaver, create a new website and a new file; save your file. If you have problems creating your website, try reading the “How to create a website” tutorial.

2. Just above the numbered steps of the tutorials you can see a hyperlink to an attached archive containing the necessary files required for solving this tutorial. Please download it, extract it and copy the files inside in the location of your choice (preferably inside your Dreamweaver website).

3. If the Insert menu is not already open, please press CTRL+F2 to do so; from the Image Show PRO section, insert an instance of Creative DW Image Show PRO in your webpage.

Insert an Image Show PRO instance

Insert an Image Show PRO instance

4. From the General tab, General Settings section, set the dimensions of the image show to 300 times 350 pixels.

Configure the general settings

Configure the general settings

5. Using the first green plus sign, insert the image item in your show and configure it as you can see in the image below. The IN effect is Decomposer with default parameters and a 35-frames duration. The No Motion parameter is enabled, so the image will be still in the image show. I set a null slide delay and no effect for the OUT one, as this will be enough for this example.

Configure the image item properties

Configure the image item properties

6. Open Flash and create a new AS 2.0 file; you don’t need to save this file, as it will just be temporarily used to export the fonts we need.

7. From Window>Other panels>Export fonts for Creative DW Image Show PRO you can open the utility for exporting fonts. I remind you that this has to be previously installed and that you receive it along with the Creative DW Image Show PRO extension.

Start the Export Fonts Tool

Start the Export Fonts Tool

8. For this tutorial, I selected font “Trajan Pro”, Basic Latin character set and a “New Folder” I created on my desktop. If you don’t have this font on your computer, you can use a different one with a successful result; click Export fonts. Another thing I would like to specify is that, when choosing the font in the "Export Fonts Utility", you could select more than one font using the CTRL and SHIFT keys; the only difference will be in the time Adobe Flash will take to export the fonts.

Export font utility interface

Export font utility interface

9. Go back to Dreamweaver and insert two text items in the image show, leaving their default properties in the Text Options window. Select the first one and edit it; insert Text “Balloon ride” in the first parameter. Now for the font you are going to use; click on the Import Fonts button and select the folder where you exported the font using the Flash tool. After you configure the other options as you can see in the image below, click on the “Apply settings to all texts” button to configure the second text item. All that is necessary to do to finish with the text items insertion is to edit the second text item and write as a text “by ExtendStudio”.

Configure the text options

Configure the text options

10. Configure the first text item as you can see in the image below.

Configure the first text item

Configure the first text item

11. Configure the first text item as you can see in the image below.

Configure the second text item

Configure the second text item

12. In the Theme tab of the configuration interface, enable the Border and Round Corners options. Leave the latter one with its default properties, and configure Border as in the image below.

Image Border configuration window

Image Border configuration window

13. As a final step, set the background color to a light gray.

Set the background color

Set the background color

14. We finished the configuration of our show. Click OK, save your file and preview it in a browser by pressing F12.

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions, please contact us at support@extendstudio.com.