[Vuejs]-Access to font assets in Vue app inside a wordpress page template

by

0👍

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.

Leave a comment