font-family: heading?

[stoplion]

// latest rebass import { Heading } from 'rebass';

//index.jsx <Heading>{name}</Heading>

//inspect css styles

font-family: heading;
font-weight: heading;
line-height: heading;

Is this expected?

[jxnblk]

The Heading component looks for font properties defined in the theme, you'll need to add values to theme.fonts.heading, theme.fontWeights.heading, and theme.lineHeights.heading to apply these styles -- you can also use the preset as a starting point: https://rebassjs.org/theming#preset

[stoplion]

I've tried adding a theme. Still getting same result. https://codesandbox.io/s/rebass-and-styled-components-v4-zzr9r?file=/src/Test.js Is there something I'm missing for Heading to pick up the theme font family?

[chandlervdw]

I'm not sure this is the place to post this or not but if I style a Heading like so:

const HeroHeader = styled(Heading)`
  font-weight: 900;
  line-height: 90%;
  background: linear-gradient(${theme.textGradientAngle}deg, #53f 20%, #05d5ff 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  > span {
    display: inline;
  }
`;

and implement it like so:

            <HeroHeader
              fontSize={[50, 80, 95, 110]}
              px={[0, 0, 3]}
              textAlign={["left", "left", headingAlignment]}
              as="h1"
            >
              <span>{title}</span>
              {title2 && (
                <>
                  <br /> {/* necessary for sarafi */}
                  <span>{title2}</span>
                </>
              )}
            </HeroHeader>

the px, textAlign, and fontSize aren't respected when I've got as="h1" in place. If I remove the as="h1", all the styles render as they should but the element is an h2.

[paulegan]

@chandlervdw : I've been hit by the same issue you describe. Solution for this discussed in #571 .

[Stenners]

Is there a fix for this yet? I still seem to get it.