Ability to add custom properties to font-settings Object

I have noticed that when using FontFaceObserver to load a font the handlers (then & catch) are passed an Object representing the font that was loaded. (Or the font that failed to load in the case of .catch.)

Consider the following code snippet

const font = new FontFaceObserver('My Family', {
  weight: 400,
  style: 'normal',
  stretch: 'normal'
})

font.load().then((font) => {
  console.log(font)
})

Provided that the font actually loads the piece of code would log the following Object to the console:

{
  family: "My Family",
  style: "normal",
  weight: 400,
  stretch: "normal"
}

I’m wondering if it would be possible to pass some custom properties along with this font-settings object.

For example I can a property like this: class: 'font-loaded-roboto' being very useful.

Current Implementation

I tested this to see if it would work, sadly it seems like the properties you add are completely discarded.

Now I haven’t looked at the source code (yet)—but I can see this being a rather minor change. I hope you will take this into consideration!

[kennethormandy]

Part of the reason I’m trying to get a better understanding is that I work on projects with large numbers of fonts too—Bram even more so—and I think what you’re after can be achieved without any change to the library. It might just be a case of more documentation.

The downside is that we lose any context about the group we are loading now.

It should be possible to map the data from the resolved promise, back to whatever your metadata structure is, right? What about something like this?

// Simplified example, you might have some single styles, and
// families with substyles, but the general approach is the same
let fontData = {
  'SAD Slices': { weight: 400, description: 'Wide display face' },
  'SAD Secrets': { weight: 400, description: 'Sketchy Emoji set' },
  'SAD Space': { weight: 900, description: 'Monospace typeface' },
}

let criticalFonts = []

// Make one observer for each font
Object.keys(fontData).forEach(function(family) {
  let data = fontData[family]
  let obs = new FontFaceObserver(family, data)
  criticalFonts.push(obs.load())
})

// I’m using the Promise.all() approach to wait until all fonts
// are loaded, but you could also have one Promise for each
// font if you don}t need to wait on them all
Promise.all(criticalFonts)
  .then(function(fonts) {
    fonts.forEach(function(font) {
      console.log(`${font.family} ${font.weight} loaded`)

      // Get the other data we want, using what we already have
      console.log(fontData[font.family].description)
    })
  })
  .catch(function(err) {
    console.warn('Some critical font are not available:', err)
  })

Let me know if that’s helpful, and maybe we could open up a PR that adds another example to the README.

[jessevdp]

In the end I went with a slightly different data-structure, one I think is a bit more robust than the other options discussed so far in this thread.

I created an array of objects, each object representing a group of fonts. You can add any meta-data about the group to this object. This group then has a property called fonts which is always an array—this fonts array contains objects representing the different fonts within that group.

This is what a group would look like:

{
  name: 'My Group',
  class: 'fonts-loaded--my-group',
  timeout: 1000,
  // Any other meta data about this group...
  fonts: [
    {
      family: 'Alegreya'
      weight: 400
    },
    {
      family: 'Chivo',
      weight: 700,
      style: 'italic'
    }
  ]
}

Now imagine an array filled with these groups.