CTRL + K

Use a custom font

What we're going to build

Creatomate includes more than a thousand fonts from the Google Font project, but you can also import your own custom font as WOF, OTF, or TTF. Here's how.

Instructions

1. Import fonts

Declare the fonts at the top of the file in order to make them available.

1{
2  "fonts": [
3    {
4      "family": "Coolvetica Rg",
5      "weight": 400,
6      "style": "normal",
7      "source": "https://cdn.creatomate.com/demo/coolvetica-rg.otf"
8    },
9    {
10      "family": "Coolvetica Rg",
11      "weight": 400,
12      "style": "italic",
13      "source": "https://cdn.creatomate.com/demo/coolvetica-rg-it.otf"
14    },
15    {
16      "family": "Coolvetica Condensed Rg",
17      "weight": 400,
18      "style": "normal",
19      "source": "https://cdn.creatomate.com/demo/coolvetica-condensed-rg.otf"
20    },
21    {
22      "family": "Coolvetica Compressed Hv",
23      "weight": 900,
24      "style": "normal",
25      "source": "https://cdn.creatomate.com/demo/coolvetica-compressed-hv.otf"
26    },
27    {
28      "family": "Coolvetica Crammed Rg",
29      "weight": 400,
30      "style": "normal",
31      "source": "https://cdn.creatomate.com/demo/coolvetica-crammed-rg.otf"
32    }
33  ]
34}

2. Use the fonts

The fonts can be referred to using the font_family, font_style and font_weight properties.

1{
2  "fonts": [
3    {
4      "family": "Coolvetica Rg",
5      "weight": 400,
6      "style": "normal",
7      "source": "https://cdn.creatomate.com/demo/coolvetica-rg.otf"
8    },
9    {
10      "family": "Coolvetica Rg",
11      "weight": 400,
12      "style": "italic",
13      "source": "https://cdn.creatomate.com/demo/coolvetica-rg-it.otf"
14    },
15    {
16      "family": "Coolvetica Condensed Rg",
17      "weight": 400,
18      "style": "normal",
19      "source": "https://cdn.creatomate.com/demo/coolvetica-condensed-rg.otf"
20    },
21    {
22      "family": "Coolvetica Compressed Hv",
23      "weight": 900,
24      "style": "normal",
25      "source": "https://cdn.creatomate.com/demo/coolvetica-compressed-hv.otf"
26    },
27    {
28      "family": "Coolvetica Crammed Rg",
29      "weight": 400,
30      "style": "normal",
31      "source": "https://cdn.creatomate.com/demo/coolvetica-crammed-rg.otf"
32    }
33  ],
34  "elements": [
35    {
36      "type": "text",
37      "y": "17.3151%",
38      "fill_color": "#ffffff",
39      "text": "Coolvetica Rg",
40      "font_family": "Coolvetica Rg",
41      "font_size": 100
42    },
43    {
44      "type": "text",
45      "x": "49.7694%",
46      "y": "33.6576%",
47      "fill_color": "#ffffff",
48      "text": "Coolvetica Rg",
49      "font_family": "Coolvetica Rg",
50      "font_style": "italic",
51      "font_size": 100
52    },
53    {
54      "type": "text",
55      "fill_color": "#ffffff",
56      "text": "Coolvetica Condensed Rg",
57      "font_family": "Coolvetica Condensed Rg",
58      "font_size": 100
59    },
60    {
61      "type": "text",
62      "x": "49.7694%",
63      "y": "66.3425%",
64      "fill_color": "#ffffff",
65      "text": "Coolvetica Compressed Hv",
66      "font_family": "Coolvetica Compressed Hv",
67      "font_weight": "900",
68      "font_size": 100
69    },
70    {
71      "type": "text",
72      "x": "49.7694%",
73      "y": "82.6849%",
74      "fill_color": "#ffffff",
75      "text": "Coolvetica Crammed Rg",
76      "font_family": "Coolvetica Crammed Rg",
77      "font_size": 100
78    }
79  ]
80}
Previous page
Video splitscreen