Specifying a font-family with styled makes the cursor not work

This is a super weird one. Here's my React component:

const Link: FC<LinkProps> = ({
  className,
  disabled = false,
  text,
  href,
  size = 'md',
}) => {
  const Anchor = disabled ? Fragment : NextLink;
  return <StyledLink
  color={disabled ? colors.neutral.grayMediumDark : colors.neutral.black}
  underline="always"
  className={`${className} ${size}`}
>
  {text}
</StyledLink>

and StyledLink is:

export const StyledLink = styled(MaterialLink)({
  fontFamily: 'GothamLight',
  cursor: 'pointer',
  // fontWeight: 400,
  lineHeight: '140%',
  // '&:hover': {
  //   fontWeight: 500,
  // },
  '&.xs': {
    fontSize: '12px',
  },
  '&.sm': {
    fontSize: '14px',
  },
  '&.md': {
    fontSize: '16px',
  },
  '&.lg': {
    fontSize: '20px',
  },
});

If I remove the fontFamily, the cursor works. If I have it, I can't get the pointer. I haven't seen anything like this before. Any help would be greatly appreciated. Thanks!