Local custom font not getting copied to target folder

[cmdillon]

hi! when i try to use a local custom font in my project webpack doesn't copy the file to the theme folder.

i've added this: @import "./fonts.css" to my entry.pcss file.

the content of the "fonts.css" file is:
@font-face {
font-family: 'font;
font-style: normal;
font-weight: normal;
src: local('font'), url('/themes/blank/assets/fonts/font.woff') format('woff');
}

the folder "fonts" gets copied to the theme folder, but then it's empty.

any help with this issue would be much appreciated

[RomainMazB]

Hi @cmdillon , I'll take a look on this in few hours. It shouldn't be hard to fix ;)

[cmdillon]

Hi! Thanks for looking into this issue. Any progress?

[RomainMazB]

@cmdillon Currently investigating on this, but it's hard to found a .woff file on the web 👀

I would like to test all possible file types but only found .ttf and .otf. Can you send me a .woff file? romainb at octobercms dot fr

[cmdillon]

@RomainMazB sure here ya go...
segoe-ui-light-gdi.woff.zip

[RomainMazB]

Thanks :) I'll take a look immediately.

[RomainMazB]

@cmdillon can you test this webpack.config.js file?

/* Required packages */
require('dotenv').config({path: __dirname + '/./../../.env'})

let path = require('path'),
    webpack = require('webpack'),
    browserSyncPlugin = require('browser-sync-webpack-plugin'),
    miniCSSExtractPlugin = require('mini-css-extract-plugin'),
    {CleanWebpackPlugin} = require('clean-webpack-plugin'),
    copyPlugin = require('copy-webpack-plugin'),
    fs = require('fs'),
    yaml = require('js-yaml'),
    CssnanoPlugin = require('cssnano-webpack-plugin'),
    htmlParser = require('./modules/html-parser.js'),
    TerserPlugin = require('terser-webpack-plugin')

async function config()
{
    // Generate the new theme path folder form boilerplate.yaml
    let themeConfig = fs.readFileSync(path.join(__dirname, 'boilerplate.yaml'), 'utf8'),
        data = yaml.safeLoad(themeConfig),
        from = path.resolve(`../${data.themeName}-src`),
        to = path.resolve(`../${data.themeName}`),
        publicPath = path.join('themes', data.themeName) + '/'

    let HTMLPlugins = await htmlParser(from, to, ['htm', 'html', 'txt'])

    let filesToCopy = [{from: path.join(from, 'new-theme.yaml'), to: path.join(to, 'theme.yaml')}, {from: path.join(from, 'version.yaml')}]
    let pathToThemePreviewFile = path.join(from, 'assets/images/theme-preview.png')
    if (fs.existsSync(pathToThemePreviewFile)) {
        filesToCopy.push({from: pathToThemePreviewFile})
    }
    let pathToThemeConfigDir = path.join(from, 'config')
    if (fs.existsSync(pathToThemeConfigDir)) {
        filesToCopy.push({from: pathToThemeConfigDir, to: 'config'})
    }

    return {
        entry: {
            context: from,
        },
        output: {
            filename: 'assets/javascript/theme.js',
            path: to,
            publicPath: publicPath
        },
        resolveLoader: {
            modules: ['node_modules', 'custom_loaders']
        },
        plugins: [
            new webpack.ProgressPlugin(),
            new browserSyncPlugin({
                host: 'localhost',
                port: 3000,
                proxy: process.env.APP_URL + ':80'
            }),
            new miniCSSExtractPlugin({
                filename: 'assets/css/theme.css',
                chunkFilename: '[id]-[hash].css',
            }),
            ... process.env.NODE_ENV === 'production' ? [
                new CleanWebpackPlugin()
            ] : [],
            new copyPlugin(filesToCopy, {copyUnmodified: true})
        ].concat(HTMLPlugins),
        module: {
            rules: [{
                test: /\.p?css$/,
                use: [ miniCSSExtractPlugin.loader, 'css-loader', 'resolve-url-loader', 'postcss-loader' ],
            },{
                test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: (url, resourcePath) => path.relative(from, resourcePath)
                }
            },{
                test: /\.(webp|png|jpe?g|gif|svg|ico)$/i,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: (url, resourcePath) => path.relative(from, resourcePath)
                }
            },{
                test: /\.(html?|txt)$/i,
                loader: 'theme-filter-loader',
                options: {
                    from: from
                }
            }],
        },
        optimization: {
            minimizer: [
                new CssnanoPlugin(),
                new TerserPlugin()
            ]
        }
    }
}

module.exports = config();

It's working here with this configuration:

[cmdillon]

@RomainMazB hi! thx for the help, but for me it's still not working correctly. i use the font like in your image that you sent, now the file gets sent to the correct folder, but the font will not load to the browser.

i guess there must be something wrong with my local dev environment. just don't know what. 😞

...OK! so—i tried one more time to see if i can get it to work and it did.🍻.

but from what i can tell it's only being served from the "blank-src" folder and not getting copied to the "blank" folder. will it get copied to the "blank" folder on build for production?

btw: thx again for the help