Oct 26, 2017

Level 2

How can I solve css/font/summernote.woff ... net::ERR_ABORTED on laravel?

I want to implement summernote in my project. My project using laravel 5.3 & vue.js 2

I call js and css summernote by elixir laravel like this :

...
elixir(function (mix) {
  mix
      ...
      .sass([
          ...
          './resources/assets/css/summernote.css'
      ], 'public/css/style.css') // public
      .scripts([
          ...
          'plugins/summernote.min.js',
          'main.js'
      ])
      .webpack('app.js');
});

I edit in summernote.css like this :

@font-face{font-family:"summernote";font-style:normal;font-weight:normal;
src:url("/resources/assets/css/font/summernote.eot?0d0d5fac99cc8774d89eb08b1a8323c4");
src:url("/resources/assets/css/font/summernote.eot?#iefix") format("embedded-opentype"),
url("/resources/assets/css/font/summernote.woff?0d0d5fac99cc8774d89eb08b1a8323c4") format("woff"),
url("/resources/assets/css/font/summernote.ttf?0d0d5fac99cc8774d89eb08b1a8323c4")

I save font summernote like this :

If I execute the summernote, on the console exist error like this :

How can I solve the error?

The error it makes fonts in summernote not showing

bobbybouwmann

8 years ago

Best Answer

Level 88

Laravel has a public directory of where all assets are loaded. If you have files in your resources directory you need to copy them over to the public directory to actually use them

For example

mix.sass()
    .scripts()
    .webpack('app.js')
    .copy('resources/assets/css/font/summernote.woff', 'public/font/summernote.woff');

Another option would be placing these files by default in your public directory.

For more info see: https://laravel.com/docs/5.5/mix#copying-files-and-directories

1 like

moses

8 years ago

Level 2

@bobbybouwmann, The copy process work properly. If I run gulp watch, there exist file summernote.woff in folder public/font. But it is still not success call the font. Look at this :

The font is not display

bobbybouwmann

8 years ago

Level 88

Did you copy all files? Also did you update this part?

@font-face{font-family:"summernote";font-style:normal;font-weight:normal;
src:url("/resources/assets/css/font/summernote.eot?0d0d5fac99cc8774d89eb08b1a8323c4");
src:url("/resources/assets/css/font/summernote.eot?#iefix") format("embedded-opentype"),
url("/resources/assets/css/font/summernote.woff?0d0d5fac99cc8774d89eb08b1a8323c4") format("woff"),
url("/resources/assets/css/font/summernote.ttf?0d0d5fac99cc8774d89eb08b1a8323c4")

moses

8 years ago

Level 2

@bobbybouwmann, Now it works. I try like this

In gulpfile.js like this :

.copy('resources/assets/css/font/summernote.eot', 'public/font/summernote.eot')
.copy('resources/assets/css/font/summernote.ttf', 'public/font/summernote.ttf')
.copy('resources/assets/css/font/summernote.woff', 'public/font/summernote.woff');

In summernote.css like this :

@font-face{font-family:"summernote";font-style:normal;font-weight:normal;
src:url("/font/summernote.eot?0d0d5fac99cc8774d89eb08b1a8323c4");
src:url("/font/summernote.eot?#iefix") format("embedded-opentype"),
url("/font/summernote.woff?0d0d5fac99cc8774d89eb08b1a8323c4") format("woff"),
url("/font/summernote.ttf?0d0d5fac99cc8774d89eb08b1a8323c4") format("truetype")}

Does that mean you?

bobbybouwmann

8 years ago

Level 88

Yeah, you need to make sure that summernote can actually find the font files, which means that they need to have the correct directory.

moses

8 years ago

Level 2

@bobbybouwmann, Okay. Thanks a lot for your help. Its help me

moses

8 years ago

Level 2

@bobbybouwmann, Actually I dont need to use gulpfile to copy it. I can directly store the summernote font data in public

bobbybouwmann

8 years ago

Level 88

Yes, that is also possible but then you are responsible for the summernote files. If you copy them from the node_modules directory you can simple run npm update and you're done ;)

moses

8 years ago

Level 2

@bobbybouwmann, How can I copy them from the node_modules directory? Try to explain in detail. I still need to learn a lot :)

Please or to participate in this conversation.