When I am trying to use font-weight and font-family when creating a styled component, nothing happens. Is there some specific way to set font-weight and font-family, when using styled components?
Any help is appreciated. Thanks in advance.
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 700;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
What you have works perfectly fine.
import React, { Component } from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';
const fontsize = {
H3FONTSIZE: '400px',
}
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 10000;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
class App extends Component {
render() {
return (<H3>Hello</H3>)
}
}
render(
<App />,
document.getElementById('root')
)
Demo: https://stackblitz.com/edit/styled-components-rbd4xo?file=index.js
