Base64 of webpack inline font

Question

I need to get the font that is in ./src/assets/fonts and convert it to base64

my config-overrides.js

    addWebpackModuleRule({
    test: /\.ttf$/,
    use: [
        {
            loader: 'ttf-loader',
            options: {
                name: './src/assets/fonts/[hash].[ext]'
            }
        }
    ]
}),

and the file itself, in which I import this font, where I already convert it to base64

import font from '../assets/fonts/font.ttf'

const someFun = () =>{
    return btoa(font);
}

But I am getting error

Module parse failed: Unexpected token (4:7)
File was processed with these loaders:
* ./node_modules/ttf-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
| 
| module.exports = createFontFamily({
>   ttf: export default __webpack_public_path__ + 
"./src/assets/fonts/7233a7aee250f9b77fba5f735143ad39.ttf",
|   woff: export default __webpack_public_path__ + 
"./src/assets/fonts/f46b66ed2d54e5321411edfe916b7300.woff",
|  });

Does this answer your question? [How to use base64-inline-loader in Vue CLI project to embed font files in CSS?](https://stackoverflow.com/questions/57339205/how-to-use-base64-inline-loader-in-vue-cli-project-to-embed-font-files-in-css) — Oleg Abrazhaev, Aug 25 '23 at 12:49

score 1 · Accepted Answer · answered Oct 26 '21 at 17:08

1

Okay, I changed the loader to this

 loader: 'base64-inline-loader'

and now everything works. It will automatically convert the file to base64

answered Oct 26 '21 at 17:08

hernesupp

67
1
5
10

base64-inline-loader is deprecated and archived on GitHub. – Oleg Abrazhaev Aug 25 '23 at 12:50

Base64 of webpack inline font

1 Answers1