aphrodite font-face object passed directly doesn't work

I'm on Aphrodite 1.2.1.

I have

const Raleway = {
  fontFamily: "Raleway",
  fontStyle: "normal",
  fontWeight: "normal",
  src: "url('https://fonts.googleapis.com/css?family=Raleway') format('woff2')",
};

This works:

const styles = StyleSheet.create({
  title: {
    fontFamily: [Raleway],
  },
});

This doesn't:

const styles = StyleSheet.create({
  title: {
    fontFamily: Raleway,
  },
});

According to the README either one should work:

"We've made it so that the fontFamily property can accept a font-face object (either directly or inside an array)."

Jun 05 '17 18:06 omerzach

Thanks for the report! Yeah, that definitely should work. I wonder why it doesn't...

Can you be more specific about what you mean by "This doesn't work"? Does it throw an error? Or just not insert the font face? What do you get as the font-family value in that style?

Jun 05 '17 18:06 xymostech

Yep, sorry :)

No errors, and the @font-face does appear to be getting added correctly, but the Chrome web inspector shows font-family: "undefined" and the text is rendered with the default font.

Jun 05 '17 18:06 omerzach

Adding it in the proposed way, stipulated in the readme also does not seem to work for me. Just like with @omerzach it injects the @font-face rule correctly in the <HEAD /> but the font-family style is undefined

Jun 29 '17 15:06 dwayne-roberts

has there been a workaround for this? even when passing the font the first way you did it, ([Raleway]) rather than passing directly, it doesnt work for me. Chrome inspector and the debugger both show that the font is defined correctly but my elements arent showing up with the correct font

Jul 12 '17 18:07 neildevas

@neildevas:

I think this PR fiexes the issue: https://github.com/Khan/aphrodite/pull/252

The array-passing thing definitely works for us though, so @xymostech's questions for me when I first posted this are probably relevant: "Can you be more specific about what you mean by 'This doesn't work'? Does it throw an error? Or just not insert the font face? What do you get as the font-family value in that style?"

Jul 12 '17 19:07 omerzach

@omerzach screen shot 2017-07-12 at 12 27 47 pm it doesnt insert the font face. when i look at the actual object the font family in the debugger, everything is defined, including the font family

Jul 12 '17 19:07 neildevas

aphrodite aphrodite copied to clipboard

font-face object passed directly doesn't work

aphrodite
aphrodite copied to clipboard