Access to font assets in Vue app inside a wordpress page template

Question

I try not to post a question unless I really can't find an answer, but I am afraid that is the case now.

I am running a project where a Vue app is deployed within a page of a wordpress site. So far so good, integration has been somewhat complicated but it is now.

The app is embedded with enqueued script and styles:

 wp_enqueue_script('portal', get_stylesheet_directory_uri() . '/myapp/dist/app.js', [], false, true);

I can solve the access to the app assets from javascript by making the wordpress theme directory available:

$script_data = [
  'image_path' => get_stylesheet_directory_uri() . '/myapp/dist/img/',
  'myapp' => get_stylesheet_directory_uri()
];
wp_localize_script(
  'portal',
  'wpData',
  $script_data
);

That took me some time to find out, so I hope it helps someone.

I am stuck though at trying to load some fonts. I have those fonts imported to the scss like this:

@font-face {
 font-family: 'icomoon';
 src: url('~@/assets/fonts/icomoon.eot?ddstsa');
 src: url('~@/assets/fonts/icomoon.eot?ddstsa#iefix') format('embedded-opentype'),
   url('~@/assets/fonts/icomoon.ttf?ddstsa') format('truetype'),
   url('~@/assets/fonts/icomoon.woff?ddstsa') format('woff'),
   url('~@/assets/fonts/icomoon.svg?ddstsa#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}

That way it my Vue app compiles, no problem, and if I run the app "stand-alone", not embedded in the wordpress page, it would find the fonts. However within the wp page, it searches for the fonts in the folder /fonts/ but it should instead go to /wp-content/themes/mytheme/myapp/dist/fonts ...

¿How can I make it use a different path for assets when deployed into wordpress?

Thanks in advance!

Answer 1

Well, I think I found an answer to my question or at least a workaround that worked for me so I thought of sharing it in case someone gets stuck at the same step as I did.

What I did was to:

• Put the fonts into the 'public/fonts' folder in my app folder structure. All assets within public folder are directly copied to the dist folder on build.

• Create a icomoon.css file, also in public/css folder with the imports:

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?txvsxz');
  src: url('../fonts/icomoon.eot?txvsxz#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?txvsxz') format('truetype'), url('../fonts/icomoon.woff?txvsxz') format('woff'), url('../fonts/icomoon.svg?txvsxz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

• Find the fonts when running stand-alone: Reference the .css file from index.html.

<link rel="stylesheet" href="<%= BASE_URL %>css/icomoon.css" />

• Find the fonts from the instance running withing wordpress page: Reference the .css file in your functions.php:

wp_enqueue_style(
      'icomoon',
      get_stylesheet_directory_uri() . '/myapp/dist/css/icomoon.css',
      [],
      null
    );

So that way font can be accessed both running in stand alone and from the wordpress page.