search

aesthetic-suite / framework

🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
https://aestheticsuite.dev
MIT License
203 stars 5 forks source link

Using multiple font faces #32

Closed jacksenior closed 6 years ago

jacksenior commented 6 years ago

When trying to set up multiple '@font-face' it seems to always load the font that is declared last and ignore the first.

Take this example

'@font-face': {
  Roboto: {
    fontStyle: 'normal',
    fontWeight: 'normal',
    srcPaths: ['fonts/Roboto.woff2', 'fonts/Roboto.ttf'],
  },
  Roboto2: {
    fontStyle: 'normal',
    fontWeight: 'normal',
    srcPaths: ['fonts/Roboto2.woff2', 'fonts/Roboto2.ttf'],
  },
}

In the network Tab I would get Roboto2 downloading and being used around the site but not Roboto. Tried Lots of different implementations after seeing this jss issue

Unsure if its implementation or a limitation at this point?

milesj commented 6 years ago

So you're using JSS yeah?

Could you screenshot/paste me what the compiled CSS looks like by chance? And what the font-family on the element looks like? And also an example of your implementation.

jacksenior commented 6 years ago

Sorry using JSS yes

The code for implementation is.

screen shot 2018-05-17 at 19 43 44 screen shot 2018-05-17 at 19 43 05

The compiled css in the DOM is

screen shot 2018-05-17 at 19 42 45

Stripped the Font stack on Html back to just the imported for testing.

screen shot 2018-05-17 at 19 45 21
milesj commented 6 years ago

Awesome thanks, will look into.

That data-meta also looks suspect.

milesj commented 6 years ago

Bug has been fixed in 2.3.2, thanks for the report!