@capsizecss/[email protected]

Patch Changes

• #227 2e83f03 Thanks @askoufis! - createTextStyle: Correctly pass through debugId and remove redundant classname

@capsizecss/[email protected]

Minor Changes

• #223 b0db2ef Thanks @florian-lefebvre! - Adds support for extracting font metrics from a buffer

  Extract font metrics from a buffer directly by calling the newly exposed fromBuffer function:

  import { fromBuffer } from '@capsizecss/unpack';
  
  const metrics = await fromBuffer(buffer);

@capsizecss/[email protected]

Minor Changes

• #225 09486af Thanks @michaeltaranto! - Update Google Fonts

@capsizecss/[email protected]

Minor Changes

• #217 4fb95bf Thanks @devjiwonchoi! - Update Google Fonts

@capsizecss/[email protected]

Minor Changes

• #213 46147a2 Thanks @michaeltaranto! - Update Google Fonts to latest

@capsizecss/[email protected]

Minor Changes

• #208 e3f73ea Thanks @michaeltaranto! - Add support for extracting from TrueType Collection by PostScript name

  Enable the extraction of font metrics for a specific font from TrueType Collection (TTC) file by providing the postscriptName option.

  For example:

  import { fromFile } from '@capsizecss/unpack';
  
  const metrics = await fromFile('AvenirNext.ttc', {
    postscriptName: 'AvenirNext-Bold',
  });

@capsizecss/[email protected]

Minor Changes

• #202 452f2a3 Thanks @michaeltaranto! - metrics: Add weight and italic support

  Add support for importing metrics for specific weights and italics.
  While internal font metrics typically do not differ between variants, the xWidthAvg metric is calculated based on the average character width, and this will differ between variants.

  Available variants will differ by font, and follow the same variant naming as Google Fonts:

  import arial from '@capsizecss/metrics/arial';
  import arialItalic from '@capsizecss/metrics/arial/italic';
  import arialBold from '@capsizecss/metrics/arial/700';
  import arialBoldItalic from '@capsizecss/metrics/arial/700italic';

  Having metrics for different variants improves visual alignment of fallback fonts when using the createFontStack API from the @capsizecss/core package.

  Example usage:

  import { createFontStack } from '@capsizecss/core';
  import montserrat from '@capsizecss/metrics/montserrat';
  import montserrat600 from '@capsizecss/metrics/montserrat/600';
  import arial from '@capsizecss/metrics/arial';
  import arialBold from '@capsizecss/metrics/arial/700';
  
  const regular = createFontStack([montserrat, arial]);
  
  // => {
  //   "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
  //   "fontFaces": [
  //     {
  //       "@font-face": {
  //         "fontFamily": "\"Montserrat Fallback\"",
  //         "src": "local('Arial'), local('ArialMT')",
  //         "ascentOverride": "85.7923%",
  //         "descentOverride": "22.2457%",
  //         "lineGapOverride": "0%",
  //         "sizeAdjust": "112.8307%"
  //       }
  //     }
  //   ]
  // }
  
  const bold = createFontStack([montserrat600, arialBold], {
    fontFaceProperties: {
      fontWeight: 700,
    },
  });
  
  // => {
  //   "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
  //   "fontFaces": [
  //     {
  //       "@font-face": {
  //         "fontWeight": 700,
  //         "fontFamily": "\"Montserrat Fallback\"",
  //         "src": "local('Arial Bold'), local('Arial-BoldMT')",
  //         "ascentOverride": "89.3502%",
  //         "descentOverride": "23.1683%",
  //         "lineGapOverride": "0%",
  //         "sizeAdjust": "108.3377%"
  //       }
  //     }
  //   ]
  // }

@capsizecss/[email protected]

Patch Changes

• #200 6238501 Thanks @michaeltaranto! - createFontStack: Prefer postscriptName or fullName for fallback source

  The @font-face declaration aliases generated by createFontStack now favour postscriptName and fullName over familyName from the provided metrics when selecting a local font face as a fallback.

  MDN recommends using either fullName and postscriptName when accessing local fonts to ensure the best matching across platforms, while also enabling selection of a single font face within a larger family, e.g. Arial Bold or Arial-BoldMT within Arial.
  For details see MDN.

  ⚠️ Note: Falling back to familyName (original behaviour) makes this work backwards compatible with older versions of font metrics.

@capsizecss/[email protected]

Minor Changes

• #195 aa77cb2 Thanks @michaeltaranto! - Extract and expose postscriptName and fullName from font metrics

  The font metrics returned now include the postscriptName and fullName properties as authored by the font creator.

  For example:

  // Arial Regular metrics
  {
    "familyName": "Arial",
    "fullName": "Arial",
    "postscriptName": "ArialMT",
    ...
  }
  
  // Arial Bold metrics
  {
    "familyName": "Arial",
    "fullName": "Arial Bold",
    "postscriptName": "Arial-BoldMT",
    ...
  }

  These values are particularly useful when constructing CSS @font-face declarations, as they can be used to specify local(<font-face-name>) sources.
  MDN recommends using both “to assure proper matching across platforms”.

  @font-face {
    font-family: 'Web Font Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700;
    ascent-override: 89.3502%;
    descent-override: 23.1683%;
    size-adjust: 108.3377%;
  }

@capsizecss/[email protected]

Minor Changes

• #195 aa77cb2 Thanks @michaeltaranto! - Extract and expose postscriptName and fullName from font metrics

  The font metrics returned now include the postscriptName and fullName properties as authored by the font creator.

  For example:

  // Arial Regular metrics
  {
    "familyName": "Arial",
    "fullName": "Arial",
    "postscriptName": "ArialMT",
    ...
  }
  
  // Arial Bold metrics
  {
    "familyName": "Arial",
    "fullName": "Arial Bold",
    "postscriptName": "Arial-BoldMT",
    ...
  }

  These values are particularly useful when constructing CSS @font-face declarations, as they can be used to specify local(<font-face-name>) sources.
  MDN recommends using both “to assure proper matching across platforms”.

  @font-face {
    font-family: 'Web Font Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700;
    ascent-override: 89.3502%;
    descent-override: 23.1683%;
    size-adjust: 108.3377%;
  }