Re: [community-group] [Format] Type: font name (#53)

Just sharing my current setup. We use tokens for both Figma and Web platforms. Figma requires the "font name" to be specified so it can also use the `loadFontAsync()` function, so we store both the name and the CSS string for `font-family`. 

I'd imagine this could be more explicit by maybe including `vendor` in there, so it's clearer what it's used for, but putting it out there for the discussion. 

```ts
type FontFamilyData = {
  fontName: string; // For Figma
  fontFamily: string; // For Web
};

interface FontFamilyToken extends BaseToken {
  name: string;
  description: string;
  data: FontFamilyData;
}

const FontFamilies: { [x: string]: FontFamilyToken } = {
  sans: {
    name: "sans",
    description: "Sans-serif font used for all UI text.",
    data: {
      fontName: "SF Pro Text",
      fontFamily:
        '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
    },
  },
  sansDisplay: {
    name: "sans-display",
    description: "Display variant of sans-serif font.",
    data: {
      fontName: "SF Pro Display",
      fontFamily:
        '-apple-system-headline, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
    },
  },
};

export default FontFamilies;

```

-- 
GitHub Notification of comment by lucastobrazil
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/53#issuecomment-914695786 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 7 September 2021 23:38:09 UTC