,\n eot?: string,\n woff?: string,\n woff2?: string,\n ttf?: string\n },\n ['normalcase' | 'uppercase' | 'lowercase']: [\n {\n fontSize: string | number,\n letterSpacing?: string | number,\n lineHeight?: string | number\n }\n ...\n ]\n }>\n}\n```\n\n**Example**\n\n```js\nconst Typesettings = {\n family: 'Helvetica Neue',\n fallbacks: ['-apple-system', 'BlinkMacSystemFont', 'Arial', 'sans-serif'],\n variants: [\n {\n fontStyle: 'normal',\n fontWeight: 400,\n sources: {\n locals: ['Font Display Name', 'Font Postscript Name'],\n eot: require('./font-path.eot'),\n woff: require('./font-path.woff'),\n woff2: require('./font-path.woff2'),\n ttf: require('./font-path.ttf'),\n },\n normalcase: [\n {\n fontSize: 12,\n letterSpacing: -0.08,\n lineHeight: 18,\n },\n {\n fontSize: 14,\n letterSpacing: -0.15,\n lineHeight: 20,\n },\n ],\n uppercase: [\n {\n fontSize: 12,\n letterSpacing: 0.1,\n lineHeight: null,\n },\n ],\n lowercase: [\n {\n fontSize: 12,\n letterSpacing: 0.1,\n lineHeight: null,\n },\n ],\n },\n ],\n};\n```\n\n### Usage\n\nOnce you have your typesettings created, you can easily generate `font style`\nobjects and a `@font-face` declaration to use throughout your app.\n\n```js\nimport styled from '@emotion/styled';\nimport { Global, css } from '@emotion/core';\nimport { generate } from 'typesettings-js';\n\nconst typesettings = {\n // your typesettings object\n};\n\nconst { fontFace, fonts } = generate(typesettings);\n\nconst TextLabel = styled('p')`\n ${fonts.s16.n400};\n`;\n\nrender(\n \n \n The quick brown fox jumps over the lazy dog.\n
,\n);\n```\n\n## Configuration\n\n| Name | Type | Default | Description |\n| :----------------------------------------------: | :--------: | :---------: | :-------------------------------------------------------------- |\n| [`cssFn`](#class-names) | `Function` | `undefined` | Returns font styles as css classnames instead of styled objects |\n| [`fontStyles`](#additional-font-styles) | `Object` | `undefined` | Additional styles that apply to all font styles |\n| [`fontFaceStyles`](#additional-font-face-styles) | `Object` | `undefined` | Additional styles that apply the @font-face declaration |\n\n### Class Names\n\nBy default, `fonts` styles are returned as object styles while the `fontFace`\ndeclaration is returned as a string. If you prefer, you can set the `cssFn`\noption and css classnames will be returned instead.\n\n```js\nimport { css } from '@emotion/core';\n\nconst options = {\n cssFn: css,\n};\n```\n\n### Additional Font Styles\n\nThe `fonts` object will return styles for `font-family`, `font-size`,\n`font-style`, `font-weight`, `letter-spacing`, `line-height`, and\n`text-transform`. You can pass in an object of styles that will be **added** to\nthese using the `fontStyles` option.\n\n```js\nconst options = {\n fontStyles: {\n textRendering: 'optimizeLegibility',\n fontFeatureSettings: '\"tnum\", \"liga\"',\n // and so on ...\n },\n};\n```\n\n### Additional Font Face Styles\n\nThe `fontFace` declaration will return styles for `font-family`, `font-style`,\nand `font-weight` as well as the font file `src`. You can pass in an object of\nstyles that will be **added** to these using the `fontFaceStyles` option.\n\n```js\nconst options = {\n fontFaceStyles: {\n fontDisplay: 'swap',\n // and so on ...\n },\n};\n```\n\n## API\n\n### createFonts()\n\n```ts\ncreateFonts: (typesettings: object, options?: object) => object;\n```\n\nCreate styled font objects to be used with CSS-in-JS frameworks from your\ntypesettings. You can pass in an object of additional\n[`fontStyles`](#additional-font-styles) that will be added to these.\n\n**Example**\n\n```js\nimport styled from '@emotion/styled';\nimport { createFonts } from 'typesettings-js';\nimport Typesettings from 'your_typesettings';\n\nconst options = {\n fontStyles: {\n textRendering: 'optimizeLegibility',\n WebkitFontSmoothing: 'antialiased',\n },\n};\n\nconst fonts = createFonts(Typesettings, options);\n\n/*\n Outputs an object of styled objects:\n {\n s10: {\n n400: { ... },\n n400_caps: { ... },\n i700: { ... },\n i700_caps: { ... }\n ...\n },\n s11: {\n ...\n }\n }\n*/\n\nconst Paragraph = styled('p')`\n ${fonts.s16.n400};\n`;\n\nrender(\n My font size is 16 and my font weight is regular.,\n);\n```\n\nIf you'd prefer to have objects of classnames, set a [`cssFn`](#class-names) in\nthe options.\n\n```js\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { createFonts } from 'typesettings-js';\nimport Typesettings from 'your_typesettings';\n\nconst options = {\n cssFn: css,\n fontStyles: {\n textRendering: 'optimizeLegibility',\n WebkitFontSmoothing: 'antialiased',\n },\n};\n\nconst fonts = createFonts(Typesettings, options);\n\n/*\n Outputs an object of classnames:\n {\n s10: {\n n400: classname,\n n400_caps: classname,\n i700: classname,\n i700_caps: classname\n ...\n },\n s11: {\n ...\n }\n }\n*/\n\nconst Paragraph = styled('p')`\n ${fonts.s16.n400};\n`;\n\nrender(\n My font size is 16 and my font weight is regular.,\n);\n```\n\n### createFontFace()\n\n```js\ncreateFontFace: (typesettings: object, options?: object) => object;\n```\n\nGenerates a @font-face css declariation from typesettings. You can pass in an\nobject of additional [`fontFaceStyles`](#additional-font-face-styles) that will\nbe added to these.\n\n**Example**\n\n```js\nimport { Global, css } from '@emotion/core';\nimport { createFontFace } from 'typesettings-js';\nimport Typesettings from 'path/to/your_typesettings';\n\nconst options = {\n cssFn: css,\n fontFaceStyles: {\n fontDisplay: 'swap',\n },\n};\n\nconst fontFace = createFontFace(Typesettings, options);\n\nrender(\n \n \n
,\n);\n```\n\n## Utilities\n\n### getFontStack()\n\nNormalizes the family name and all fallbacks, combining them both into a single\nfont stack.\n\n```ts\ngetFontStack: (family: string, fallbacks?: string[]) => string;\n```\n\n### normalizeFontFamily()\n\nReturns a normalized FontFamily name where names with a space are automatically\nwrapped in quotes.\n\n```ts\nnormalizeFontFamily: (family: string) => string;\n```\n\n### parseSize()\n\nParses a number and unit string, returning only the number used\n\n```ts\nparseSize: (str: string) => string;\n```\n\n## Typescript\n\nTypescript types and interfaces are exported. You can import them as named\nimports. TypeScript checks css properties with the object style syntax using\n[`csstype`](https://www.npmjs.com/package/csstype) package.\n\nExample typing and extending typesetting `options`.\n\n```jsx\n// foo.ts\nimport { Interpolation, SerializedStyles } from '@emotion/core';\nimport { createFonts, Typesettings, TypesettingOptions } from 'typesettings-js';\n\nconst typesettings: Typesettings = {\n // your typesettings\n}\n\nconst options: TypesettingOptions = {\n cssFn: css,\n fontStyles: {\n WebkitFontSmoothing: 'antialiaseddddd', // Mispelling error\n ^ Argument of type 'WebkitFontSmoothing: 'antialiaseddddd';' is not assignable [...]\n },\n fontFaceStyles: {\n WebkitFontSmoothing: 'antialiased' // WebkitFontSmoothing is not a valid csstype property\n ^ Argument of type 'WebkitFontSmoothing: 'antialiased';' is not assignable [...]\n },\n}\n\ncreateFonts(typesettings, options)\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/buames/typesettings-js/issues"}}