woff and ttf fonts 404 not found
22,070
Solved! I separated the srcs
, like that:
@font-face
font-family: "Alef"
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot?#iefix") format("embedded-opentype")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.woff") format("woff")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.ttf") format("truetype")
src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.svg#alefbold") format("svg")
font-weight: bold
font-style: normal
Author by
Yonatan
Updated on May 03, 2020Comments
-
Yonatan about 4 years
I'm using webpack to compile my sass files. I have a
font-face
that looks like this:@font-face font-family: "Alef" src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot") src: url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.eot?#iefix") format("embedded-opentype"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.woff") format("woff"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.ttf") format("truetype"), url("..\..\public\fonts\Alef\Alef-Webfont\Alef-Bold.svg#alefbold") format("svg") font-weight: bold font-style: normal
and this is how the loaders in my webpack config file looks like
{ test: /\.html$/, loader: 'html' }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?[a-z0-9=&.]+)?$/, loader: 'file?name=assets/[name].[hash].[ext]' }, { test: /\.sass$/, exclude: /node_modules/, loader: 'raw-loader!sass-loader' }, { test: /\.css$/, exclude: helpers.root('src', 'app'), loader: ExtractTextPlugin.extract('style', 'css?sourceMap') }, { test: /\.css$/, include: helpers.root('src', 'app'), loader: 'raw' }
but, i'm getting 404 on the ttf and woff, so this font appears only in chrome (doesn't appear in firefox and edge)
thanks!