I'm encountering difficulties with rendering fonts on my react application. I'm unsure of what I might be doing incorrectly. I have implemented font-face in my project and here is a snippet from my font.styl file.
All the fonts are located in the public directory. https://i.sstatic.net/VNXKB.png
font.styl
@font-face
font-family 'museo_sans700'
src url('/public/fonts/museosans_0-webfont.woff2') format('woff2')
url('/public/fonts/museosans_0-webfont.woff') format('woff')
font-weight normal
font-style normal
@font-face
font-family 'museo_sans300'
src url('/public/fonts/museosans-300-webfont.woff2') format('woff2')
url('/public/fonts/museosans-300-webfont.woff') format('woff')
font-weight normal
font-style normal
@font-face
font-family 'museo_sans500'
src url('/public/fonts/museosans-webfont.woff2') format('woff2')
url('/public/fonts/museosans-webfont.woff') format('woff')
font-weight normal
font-style normal
@font-face
font-family 'montserratregular'
src url('/public/fonts/montserrat-regular-webfont.woff2') format('woff2')
url('/public/fonts/montserrat-regular-webfont.woff') format('woff')
font-weight normal
font-style normal
This is a segment from my base.styl:
@import './bs-custom.styl'
@import './fonts.styl'
html
width 100%
height 100%
body
width 100vw
min-height 100vh
transition all 0.2s ease
background-color #F0F0F0
color theme_text
font-size 14px
font-weight 400
font-family museo500
overflow hidden
The following configuration for font loading is being used:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=100000&mimetype=application/font-woff'
},
However, the fonts are still not displaying properly.