Globabl font-family not applying to button

user_6193913 0
Viewed 127

I create a button and a link component in the following way using styled-components

import { Link } from "react-router-dom";
import styled, { css } from "styled-components";

const style = css`

    text-decoration:none;
    font-size:2rem;
    border-radius:10px;
    color:var(--white);
    background-color:transparent;
    border: none;
    cursor: pointer;
    padding:1.25rem 3rem;
    text-transform:uppercase;
    letter-spacing:.15rem; 
    
    &:hover,
    &:active {
        color:var(--colorFour);
    }

`

export const StyledButton = styled.button`${style}`
export const StyledLink = styled(Link)`${style}`

I also have a global style in my project, that sets a global font-family

body {
  font-family: 'Comic Neue', sans-serif;
  height:100vh;
  padding:0 2rem;

  display:flex;
  justify-content:center;
  align-items:center;
  background: var(---colorOne);  
  background: linear-gradient(to right, var(--colorTwo), var(--colorOne));
}

When I use the link component, the correct style 'Comic Neue' is applied

However, if I use the button the styled applied is for some reason -apple-system

The weird thing is, that when I look in the calculated styles for the button, it looks like the 'Comic Neue' should apply, but for some reason it doesn't

enter image description here

Anyone know what might be the problem?

styled-components reactjs css html javascript
1 Answers

Form elements fo not inherit the font-family property.

Add a font-family: inherit CSS property to the button to use the same font as the body.

button {
  font-family: inherit;
}
user_67604520
Related