gewode's avatar

In Laravel mix, how to configure to process css font path in specific directory

Inside my Laravel project, in webpack.mix.js, I have used this:

mix.js('resources/themes/tailwind/js/app.js', 'public/themes/tailwind/js')
    .less('resources/themes/tailwind/css/app.less', 'public/themes/tailwind/css')
    .tailwind('./tailwind.config.js');

It is working fine, But the issue is that it processes the font path in public/fonts, instead I want it should be public/themes/tailwind/fonts.

Please guide, How I can configure this.

0 likes
3 replies
aurawindsurfing's avatar

To use custom font in tailwind add it to your app.blade first:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">

Then reference it in your tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        // '-apple-system',
        // 'BlinkMacSystemFont',
        // '"Segoe UI"',
        // 'Roboto',
        // '"Helvetica Neue"',
        // 'Arial',
        // '"Noto Sans"',
        // 'sans-serif',
        // '"Apple Color Emoji"',
        // '"Segoe UI Emoji"',
        // '"Segoe UI Symbol"',
        // '"Noto Color Emoji"',
        'Open Sans'
      ],
      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: [
        'Menlo',
        'Monaco',
        'Consolas',
        '"Liberation Mono"',
        '"Courier New"',
        'monospace',
      ],
    }
}
}
gewode's avatar

@AURAWINDSURFING - Thanks for the answer, In my project theses fonts are custom font icons. something like font-awesome.

Please or to participate in this conversation.