I am a beginner in the realm of React and I am attempting to apply a custom font style to specific input fields as well as their placeholders. While everything loads successfully, my CustomFontStyle is not being applied. Can anyone shed some light on what might be missing?
import 'styles/utilities.scss';
useEffect(() => {
const baseFieldStyles = {
color: '#e60000',
font: 'normal 400 0.875em CustomFontStyle'
};
const myConfiguration = {
onFieldEventHandler: {
onFocus: tagId => {
setFocus(tagId);
},
onBlur: () => {
setFocus('');
}
},
expirationDatePlaceHolder: 'MM/YY',
style: {
input: {
...baseFieldStyles
},
'::placeholder': {
...baseFieldStyles
},
span: {
...baseFieldStyles,
'line-height': '30px'
}
}
};
}, [
staticData.getSection,
shouldRenderFields
]);
utilities.scss
@import '~styles/_globals.scss';
@font-face {
font-family: 'CustomFontStyle';
font-style: normal;
font-weight: 300;
}