> This page is for Developer. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.makeswift.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server. # Create Typography POST https://api.makeswift.com/v4/typographies Content-Type: application/json This feature is in beta and may change. Requests return `403` until the feature flag is enabled for your site or workspace. Creates a site owned typography. Reference: https://docs.makeswift.com/developer/api-reference/rest/typographies/create-typography ## Authentication - `x-api-key` header (required) — API key authentication with an App API key (e.g. sk_eczMHVBY9fV6GYFhvs53qcnxq7yptlXL3ABKOZtn6dQ). ## Request ### Body (application/json) This endpoint expects a CreateTypographyV4BodyDto. - `siteId` (string, required) — The site ID to create the typography on. - `name` (string, required) — The name of the typography. - `style` (list of CreateTypographyV4BodyDtoStyleItems, required) — Per-device style overrides. A "color" references an existing swatch by its "id" or "referenceId" in "swatchId" (create one with the Swatch API first); omit or null it for no swatch. "alpha" (0-1) sets opacity. ## Response ### 201 - `id` (string, required) - `referenceId` (string, required) — The id to use wherever a text element references this typography (e.g. the "id" field of a Text element's "typography" prop in a page's element data) - NOT the plain "id" field above, which is used as the typography identifier in other REST typography API calls. - `name` (string, required) - `style` (list of TypographyV4ResponseDtoStyleItems, required) - `siteId` (string, required) ## Errors ### 400 Bad Request Error - `object` (enum, required) - Allowed values: `error` - `code` (enum, required) - Allowed values: `bad_request` - `message` (string, required) ### 403 Forbidden Error - `object` (enum, required) - Allowed values: `error` - `code` (enum, required) - Allowed values: `forbidden` - `message` (string, required) ### 404 Not Found Error - `object` (enum, required) - Allowed values: `error` - `code` (enum, required) - Allowed values: `not_found` - `message` (string, required) ## Types ### CreateTypographyV4BodyDtoStyleItems - `deviceId` (string, required) - `value` (CreateTypographyV4BodyDtoStyleItemsValue, required) ### TypographyV4ResponseDtoStyleItems - `deviceId` (string, required) - `value` (TypographyV4ResponseDtoStyleItemsValue, required) ### CreateTypographyV4BodyDtoStyleItemsValue - `color` (CreateTypographyV4BodyDtoStyleItemsValueColor, optional, nullable) - `fontFamily` (string, optional, nullable) - `fontSize` (CreateTypographyV4BodyDtoStyleItemsValueFontSize, optional, nullable) - `fontWeight` (double, optional, nullable) - `italic` (boolean, optional, nullable) - `letterSpacing` (double, optional, nullable) - `lineHeight` (double, optional, nullable) - `strikethrough` (boolean, optional, nullable) - `textAlign` (string, optional, nullable) - `underline` (boolean, optional, nullable) - `uppercase` (boolean, optional, nullable) ### TypographyV4ResponseDtoStyleItemsValue - `color` (TypographyV4ResponseDtoStyleItemsValueColor, optional, nullable) - `fontFamily` (string, optional, nullable) - `fontSize` (TypographyV4ResponseDtoStyleItemsValueFontSize, optional, nullable) - `fontWeight` (double, optional, nullable) - `italic` (boolean, optional, nullable) - `letterSpacing` (double, optional, nullable) - `lineHeight` (double, optional, nullable) - `strikethrough` (boolean, optional, nullable) - `textAlign` (string, optional, nullable) - `underline` (boolean, optional, nullable) - `uppercase` (boolean, optional, nullable) ### CreateTypographyV4BodyDtoStyleItemsValueColor - `swatchId` (string, optional, nullable) — The "id" or "referenceId" of an existing swatch (create one with the Swatch API first). Omit or null it for no swatch. - `alpha` (double, optional, nullable) — Opacity between 0 and 1. ### CreateTypographyV4BodyDtoStyleItemsValueFontSize - `value` (double, optional, nullable) - `unit` (string, optional, nullable) ### TypographyV4ResponseDtoStyleItemsValueColor - `swatchId` (string, required, nullable) - `alpha` (double, optional, nullable) ### TypographyV4ResponseDtoStyleItemsValueFontSize - boolean - double - string - any ## Examples **Request** ```json { "siteId": "123e4567-e89b-12d3-a456-426614174000", "name": "Heading 1", "style": [ { "deviceId": "desktop", "value": { "color": { "swatchId": "8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d", "alpha": 1 }, "fontFamily": "Inter", "fontSize": { "value": 48, "unit": "px" }, "fontWeight": 500, "lineHeight": 2 } }, { "deviceId": "mobile", "value": { "fontSize": { "value": 32, "unit": "px" } } } ] } ``` **Response** ```json { "id": "2f3c9a1e-8b47-4d6a-9c1e-5a7b3d2f8e91", "referenceId": "VHlwb2dyYXBoeToyZjNjOWExZS04YjQ3LTRkNmEtOWMxZS01YTdiM2QyZjhlOTE=", "name": "Heading 1", "style": [ { "deviceId": "desktop", "value": { "color": { "swatchId": "8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d", "alpha": 1 }, "fontFamily": "Inter", "fontSize": true, "fontWeight": 500, "lineHeight": 2 } }, { "deviceId": "mobile", "value": { "fontSize": true } } ], "siteId": "123e4567-e89b-12d3-a456-426614174000" } ``` **SDK Code** ```python import requests url = "https://api.makeswift.com/v4/typographies" payload = { "siteId": "123e4567-e89b-12d3-a456-426614174000", "name": "Heading 1", "style": [ { "deviceId": "desktop", "value": { "color": { "swatchId": "8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d", "alpha": 1 }, "fontFamily": "Inter", "fontSize": { "value": 48, "unit": "px" }, "fontWeight": 500, "lineHeight": 2 } }, { "deviceId": "mobile", "value": { "fontSize": { "value": 32, "unit": "px" } } } ] } headers = { "x-api-key": "", "Content-Type": "application/json" } response = requests.post(url, json=payload, headers=headers) print(response.json()) ``` ```javascript const url = 'https://api.makeswift.com/v4/typographies'; const options = { method: 'POST', headers: {'x-api-key': '', 'Content-Type': 'application/json'}, body: '{"siteId":"123e4567-e89b-12d3-a456-426614174000","name":"Heading 1","style":[{"deviceId":"desktop","value":{"color":{"swatchId":"8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d","alpha":1},"fontFamily":"Inter","fontSize":{"value":48,"unit":"px"},"fontWeight":500,"lineHeight":2}},{"deviceId":"mobile","value":{"fontSize":{"value":32,"unit":"px"}}}]}' }; try { const response = await fetch(url, options); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } ``` ```go package main import ( "fmt" "strings" "net/http" "io" ) func main() { url := "https://api.makeswift.com/v4/typographies" payload := strings.NewReader("{\n \"siteId\": \"123e4567-e89b-12d3-a456-426614174000\",\n \"name\": \"Heading 1\",\n \"style\": [\n {\n \"deviceId\": \"desktop\",\n \"value\": {\n \"color\": {\n \"swatchId\": \"8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d\",\n \"alpha\": 1\n },\n \"fontFamily\": \"Inter\",\n \"fontSize\": {\n \"value\": 48,\n \"unit\": \"px\"\n },\n \"fontWeight\": 500,\n \"lineHeight\": 2\n }\n },\n {\n \"deviceId\": \"mobile\",\n \"value\": {\n \"fontSize\": {\n \"value\": 32,\n \"unit\": \"px\"\n }\n }\n }\n ]\n}") req, _ := http.NewRequest("POST", url, payload) req.Header.Add("x-api-key", "") req.Header.Add("Content-Type", "application/json") res, _ := http.DefaultClient.Do(req) defer res.Body.Close() body, _ := io.ReadAll(res.Body) fmt.Println(res) fmt.Println(string(body)) } ``` ```ruby require 'uri' require 'net/http' url = URI("https://api.makeswift.com/v4/typographies") http = Net::HTTP.new(url.host, url.port) http.use_ssl = true request = Net::HTTP::Post.new(url) request["x-api-key"] = '' request["Content-Type"] = 'application/json' request.body = "{\n \"siteId\": \"123e4567-e89b-12d3-a456-426614174000\",\n \"name\": \"Heading 1\",\n \"style\": [\n {\n \"deviceId\": \"desktop\",\n \"value\": {\n \"color\": {\n \"swatchId\": \"8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d\",\n \"alpha\": 1\n },\n \"fontFamily\": \"Inter\",\n \"fontSize\": {\n \"value\": 48,\n \"unit\": \"px\"\n },\n \"fontWeight\": 500,\n \"lineHeight\": 2\n }\n },\n {\n \"deviceId\": \"mobile\",\n \"value\": {\n \"fontSize\": {\n \"value\": 32,\n \"unit\": \"px\"\n }\n }\n }\n ]\n}" response = http.request(request) puts response.read_body ``` ```java import com.mashape.unirest.http.HttpResponse; import com.mashape.unirest.http.Unirest; HttpResponse response = Unirest.post("https://api.makeswift.com/v4/typographies") .header("x-api-key", "") .header("Content-Type", "application/json") .body("{\n \"siteId\": \"123e4567-e89b-12d3-a456-426614174000\",\n \"name\": \"Heading 1\",\n \"style\": [\n {\n \"deviceId\": \"desktop\",\n \"value\": {\n \"color\": {\n \"swatchId\": \"8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d\",\n \"alpha\": 1\n },\n \"fontFamily\": \"Inter\",\n \"fontSize\": {\n \"value\": 48,\n \"unit\": \"px\"\n },\n \"fontWeight\": 500,\n \"lineHeight\": 2\n }\n },\n {\n \"deviceId\": \"mobile\",\n \"value\": {\n \"fontSize\": {\n \"value\": 32,\n \"unit\": \"px\"\n }\n }\n }\n ]\n}") .asString(); ``` ```php request('POST', 'https://api.makeswift.com/v4/typographies', [ 'body' => '{ "siteId": "123e4567-e89b-12d3-a456-426614174000", "name": "Heading 1", "style": [ { "deviceId": "desktop", "value": { "color": { "swatchId": "8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d", "alpha": 1 }, "fontFamily": "Inter", "fontSize": { "value": 48, "unit": "px" }, "fontWeight": 500, "lineHeight": 2 } }, { "deviceId": "mobile", "value": { "fontSize": { "value": 32, "unit": "px" } } } ] }', 'headers' => [ 'Content-Type' => 'application/json', 'x-api-key' => '', ], ]); echo $response->getBody(); ``` ```csharp using RestSharp; var client = new RestClient("https://api.makeswift.com/v4/typographies"); var request = new RestRequest(Method.POST); request.AddHeader("x-api-key", ""); request.AddHeader("Content-Type", "application/json"); request.AddParameter("application/json", "{\n \"siteId\": \"123e4567-e89b-12d3-a456-426614174000\",\n \"name\": \"Heading 1\",\n \"style\": [\n {\n \"deviceId\": \"desktop\",\n \"value\": {\n \"color\": {\n \"swatchId\": \"8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d\",\n \"alpha\": 1\n },\n \"fontFamily\": \"Inter\",\n \"fontSize\": {\n \"value\": 48,\n \"unit\": \"px\"\n },\n \"fontWeight\": 500,\n \"lineHeight\": 2\n }\n },\n {\n \"deviceId\": \"mobile\",\n \"value\": {\n \"fontSize\": {\n \"value\": 32,\n \"unit\": \"px\"\n }\n }\n }\n ]\n}", ParameterType.RequestBody); IRestResponse response = client.Execute(request); ``` ```swift import Foundation let headers = [ "x-api-key": "", "Content-Type": "application/json" ] let parameters = [ "siteId": "123e4567-e89b-12d3-a456-426614174000", "name": "Heading 1", "style": [ [ "deviceId": "desktop", "value": [ "color": [ "swatchId": "8a1f3c2d-5b6e-4f7a-9c0d-1e2f3a4b5c6d", "alpha": 1 ], "fontFamily": "Inter", "fontSize": [ "value": 48, "unit": "px" ], "fontWeight": 500, "lineHeight": 2 ] ], [ "deviceId": "mobile", "value": ["fontSize": [ "value": 32, "unit": "px" ]] ] ] ] as [String : Any] let postData = JSONSerialization.data(withJSONObject: parameters, options: []) let request = NSMutableURLRequest(url: NSURL(string: "https://api.makeswift.com/v4/typographies")! as URL, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 10.0) request.httpMethod = "POST" request.allHTTPHeaderFields = headers request.httpBody = postData as Data let session = URLSession.shared let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in if (error != nil) { print(error as Any) } else { let httpResponse = response as? HTTPURLResponse print(httpResponse) } }) dataTask.resume() ```