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
Share:
22,070
Yonatan
Author by

Yonatan

Updated on May 03, 2020

Comments

  • Yonatan
    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!