Skip to main content
const fontComponents: {
  family: {
     page: {
        value: "{font.family.body}";
     };
     cta: {
        value: "{font.family.interactive}";
     };
     link: {
        value: "{font.family.interactive}";
     };
     input: {
        value: "{font.family.interactive}";
     };
     select: {
        value: "{font.family.interactive}";
     };
     code: {
        value: "{font.family.mono}";
     };
     iframe: {
        value: "{font.family.interactive}";
     };
  };
  url: {
     iframe: {
        value: "";
     };
  };
};
Component font tokens.

Type declaration

NameTypeDefault value
family{ page: { value: "{font.family.body}"; }; cta: { value: "{font.family.interactive}"; }; link: { value: "{font.family.interactive}"; }; input: { value: "{font.family.interactive}"; }; select: { value: "{font.family.interactive}"; }; code: { value: "{font.family.mono}"; }; iframe: { value: "{font.family.interactive}"; }; }-
family.page{ value: "{font.family.body}"; }-
family.page.value"{font.family.body}""{font.family.body}"
family.cta{ value: "{font.family.interactive}"; }-
family.cta.value"{font.family.interactive}""{font.family.interactive}"
family.link{ value: "{font.family.interactive}"; }-
family.link.value"{font.family.interactive}""{font.family.interactive}"
family.input{ value: "{font.family.interactive}"; }-
family.input.value"{font.family.interactive}""{font.family.interactive}"
family.select{ value: "{font.family.interactive}"; }-
family.select.value"{font.family.interactive}""{font.family.interactive}"
family.code{ value: "{font.family.mono}"; }-
family.code.value"{font.family.mono}""{font.family.mono}"
family.iframe{ value: "{font.family.interactive}"; }-
family.iframe.value"{font.family.interactive}""{font.family.interactive}"
url{ iframe: { value: ""; }; }-
url.iframe{ value: ""; }-
url.iframe.value""""