- Understanding the Font Model
- Retrieving Font Data
- Creating Products with Text Configurations
- Working with Fonts in Adobe Flash/Flex
In our terminology, a font family is a grouping of similar fonts that basically differ in their shape, i.e. regular, bold or italic. A typical font family, e.g. Arial, is illustrated in the picture above. A font family has right now the following characteristics:
- Core Data: Each font family has a name, a deprecated attribute and a list of allowed print types.
The deprecated attribute indicates whether a font is outdated. If a font is outdated it can be used for displaying existing products and render product images but not for creating new products.
The list of allowed print types contains those print types that allow to print text and use fonts from the font family therefore.
- Fonts: Each font family also has a list of one or more fonts that belong to one font group, e.g. Arial. The fonts basically differ in their shape, e.g. regular, bold, italic. A font therefore has a name, a style, a weight and a minimalSize attribute and a list of resources.
The name is usually used to address a font when displaying existing products or creating new ones.
Style and weight attribute indicate which special shape shall be used. Thereby, the style can contain values like normal (aka regular) or italic and the weight attribute values like normal (aka regular) or bold. All 4 combinations of the values are allowed.
The minimalSize attribute defines the minimum size in which this font can be printed on apparel. This value is checked when creating new products.
You can access the list of all available font families using a URL similar to the following one http://api.spreadshirt.net/api/v1/shops/205909/fontFamilies?fullData=true. To access one specific font family, like Arial, you can use the following URL http://api.spreadshirt.net/api/v1/shops/205909/fontFamilies/5. The returned XML data will look as follows:
What you get back is the font family information with all available fonts. What you need to work with the font inside Adobe Flash/Flex is the font name, the font weight and the font style information. To be able to load the actual font asset into your application, use the URL in the resource tag that points to the actual font asset.
Now, I want to clarify, how the information from the font model can be used to create products with text.
The XML data above illustrates a sample product with a text configuration. The important part here is the text tag inside the svg tags. The text tag indicates that the text provided as plain text or inside other tspan tags shall be printed on a piece of apparel, e.g. a shirt. To tell us which font shall be used and in which size we shall print the text, you need to provide font, style and size information. Thereby, you have three options to specify which font shall be used:
- The SVG default is to specify font-family, font-style and font-weight.
- Another option is to specify fontFamilyId, font-style and, font-weight.
- The third option is to specify a fontId only.
As you can see, specifying which font shall be used and creating a product with a text configuration with a selected font is quite simple. Please note that SVG font-family attribute matches Spreadshirt’s font name. Our used SVG subset is explained in detail in our developer network wiki on the SVG (Scalable Vector Graphics) page.
Knowing how we can create products with text configurations, the next question to answer is how we can do that in Adobe Flash/Flex applications.
As already mentioned above, the XML payload for each font also contains a URL that points to the actual font asset, e.g. a URL similar to http://image.spreadshirt.net/image-server/v1/fontFamilies/5/fonts/18.swf. The font asset is required to actually render the font in your Adobe Flash/Flex application. When calling the URL mentioned above, our image API will return an SWF file that contains a compiled class extending flash.display.Sprite with the embedded font that is based on the following template:
As you can see, when the SWF file is loaded, the constructor of the class and the method registerFonts are executed which registers the embedded font via flash.text.Font with your Adobe Flash/Flex application.
To actually load the font into your application, use the flash.display.Loader class to load the actual font asset. The code that is required therefore should look similar to the following one:var request:
Having loaded the font, you can now use the font when working with text in a flashx.textLayout.formats.TextLayoutFormat for example as follows:var format:
Having loaded the cufòn font, we can now use the font for printing text with Raphael as follows:
Important here is the statement r.getFont() which retrieves the previously registered font and r.print() which uses the font to actually print text on the Raphael canvas.