Understanding the Font Model
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.
The list of resources contains links to the actual font assets required to render fonts in an Adobe Flash/Flex or Javascript application. Right now, we only provide font data in swf format for Flash/Flex applications.
Retrieving Font Data
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:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<fontFamily xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://api.spreadshirt.net" weight="4.0"
xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/fontFamilies/5" id="5">
<name>Arial</name>
<printTypes>
<printType xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/printTypes/14" id="14"/>
...
</printTypes>
<fonts>
...
<font id="18">
<name>Arial</name>
<weight>bold</weight>
<style>italic</style>
<minimalSize>14.8167</minimalSize>
<resources>
<resource xlink:href="http://image.spreadshirt.net/image-server/v1/fontFamilies/5/fonts/18"
mediaType="swf"/>
</resources>
</font>
...
</fonts>
<deprecated>false</deprecated>
</fontFamily>
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.
Creating Products with Text Configurations
Now, I want to clarify, how the information from the font model can be used to create products with text.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<product xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://api.spreadshirt.net">
<productType id="95"/>
<appearance id="2"/>
<restrictions>
<freeColorSelection>false</freeColorSelection>
<example>false</example>
</restrictions>
<configurations>
<configuration type="text">
<printArea id="154"/>
<printType id="14"/>
<offset unit="mm">
<x>1.0</x>
<y>1.0</y>
</offset>
<content dpi="25.4" unit="mm">
<svg>
<text transform="" font-family="Arial" font-style="normal" font-weight="normal"
font-size="52" printColorId="12" text-anchor="start"
x="30" y="110">Text</text>
</svg>
</content>
<restrictions>
<changeable>false</changeable>
</restrictions>
</configuration>
</configurations>
</product>
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.
Working with Fonts in Adobe Flash/Flex
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.
Creating the Font Asset
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:
package {
import flash.display.Sprite;
import flash.system.Security;
import flash.text.Font;
public class ${scriptname} extends Sprite { // e.g. ArialNormalNormal
[Embed(source = "${filename}", // e.g. arial.ttf
fontFamily = "_${fontname}", // e.g. Arial or AmericanTypewriter
fontName = "_${fontname}", // e.g. Arial or AmericanTypewriter
fontWeight = "${fontweight}", // e.g. bold or normal
fontStyle = "${fontstyle}", // e.g. italic or normal
advancedAntiAliasing = "true",
embedAsCFF = "true",
mimeType = "application/x-font-truetype",
unicodeRange = "U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,
U+005B-U+0060,U+0061-U+007A,U+007B-
U+007E,U+00C0U+00DF,U+00E0-U+00FF")]
private static var _font:Class;
public function ${scriptname}() {
super();
Security.allowDomain("*");
registerFonts();
}
private function registerFonts():void {
Font.registerFont(_font);
}
}
}
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.
Loading the Font Asset
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:
var request:URLRequest =
new URLRequest(resourceURL); // http://image.spreadshirt.net/image-server/v1/fontFamilies/5/fonts/18?mediaType=swf
var context:LoaderContext = new LoaderContext();
context.applicationDomain = ApplicationDomain.currentDomain;
context.securityDomain = SecurityDomain.currentDomain;
loader.load(request, context);
Using the Font for Text Formatting
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:
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontFamily = ${fontname}; // Arial or AmericanTypewriter
format.fontWeight = ${fontweight}; // bold or normal
format.fontStyle = ${fontstyle}; // italic or normal
Working with Fonts in Javascript
Working with fonts in Javascript is a little bit more difficult than working with fonts in Adobe Flash/Flex as our image API does only support SWF as media type for delivering font assets right now. However, it is possible to also work with fonts in Javascript by manually creating the font assets using cufón.
Creating the Font Asset
Using cufón generator and the actual TTF font file it is possible to create a JSON/Javascript that contains the VML path information for rendering the font later in your Javascript application. You can use cufón fonts with Javascript libraries like Raphaël that simplify working with vector graphics. Using both, you can write your own Javascript applications for creating customized apparel as we did with the “News headline on a Shirt” demo.
Loading the Font Asset
Having created the cufòn font file using the cufòn generator, you now only need to include the Javascript file into your HTML page. The code therefore would look similar to the following one:
<html>
<head>
...
<script type="text/javascript" src="js/ext/raphael.js"></script>
<script type="text/javascript" src="js/ext/Anzeigen_400.font.js"></script>
...
</head>
<body>
...
</body>
</html>
Using the Font for Text Formatting
Having loaded the cufòn font, we can now use the font for printing text with Raphael as follows:
var r = Raphael(0, 0, 500, 500);
r.print(10, 50, "text", r.getFont("AnzeigenGroteskLT"), 30).attr({fill: "#fff"});
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.