Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

woff and ttf fonts 404 not found

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!

like image 719
Yonatan Avatar asked Dec 07 '22 22:12

Yonatan


1 Answers

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
like image 117
Yonatan Avatar answered Dec 10 '22 10:12

Yonatan