Edit Font Family

Name

Also known as (comma separated)

Brief definition Typeface.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "family", "type": "select", "label": "Font family", "default": "system-ui, sans-serif", "options": [ "system-ui, sans-serif", "Georgia, 'Times New Roman', serif", "'Courier New', monospace" ] }, { "id": "weight", "type": "select", "label": "Weight", "default": "400", "options": [ "400", "700" ] }, { "id": "fontSize", "type": "number", "label": "Font size", "default": 20, "min": 14, "max": 32, "step": 2 }, { "id": "text", "type": "text", "label": "Sample text", "default": "Typeface changes the whole feel" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ff-wrap\">\n <p class=\"ff-text\" style=\"font-family:{{family}};font-weight:{{weight}};font-size:{{fontSize}}px;\">{{text}}</p>\n <p class=\"ff-caption\">font-family: {{family}}</p>\n</div>\n<style>\n.ff-wrap { color: #241430; width: 300px; }\n.ff-text { margin: 0; line-height: 1.4; }\n.ff-caption { margin: 12px 0 0; font: 12px/1.4 system-ui, sans-serif; color: #241430cc; }\n</style>", "tailwind": "<div class=\"text-[#241430] w-[300px]\">\n <p class=\"m-0 leading-snug\" style=\"font-family:{{family}};font-weight:{{weight}};font-size:{{fontSize}}px;\">{{text}}</p>\n <p class=\"mt-3 font-sans text-xs text-[#241430]/80\">font-family: {{family}}</p>\n</div>", "react": "export function FontFamily({\n family = \"{{family}}\",\n weight = \"{{weight}}\",\n fontSize = {{fontSize}},\n text = \"{{text}}\",\n}) {\n return (\n <div style={{ color: \"#241430\", width: 300 }}>\n <p style={{ margin: 0, lineHeight: 1.4, fontFamily: family, fontWeight: Number(weight), fontSize }}>{text}</p>\n <p style={{ marginTop: 12, font: \"12px/1.4 system-ui, sans-serif\", color: \"#241430cc\" }}>font-family: {family}</p>\n </div>\n );\n}" }