Path issue for font within NPM package

help
1

Howdy…

I’m using the bootstrap NPM package (3.3.7) that includes the glyphicons-halflings-regular.woff2 font. I use it extensively for icons throughout my site. I deploy via mup to a plain-vanilla Ubuntu 16.04LTS droplet on DigitalOcean. Running Meteor 1.8.

The font loads fine if the initial load of the site is at the root level; https://www.mysite.com/, https://www.mysite.com/about, etc. work fine.

However, the font fails to load if you navigate directly to a path below the root; https://www.mysite.com/order/abcd1234 shows boxes for icons as the font hasn’t loaded. Looking at the compiled app JS, I see:

url(fonts/glyphicons-halflings-regular.woff2)

…so it seems the font’s path is relative and (quite understandably) the browser finds it at https://www.mysite.com/fonts/ but not at https://www.mysite.com/orders/fonts/.

Is there a way, somewhere deep in my site’s startup JS or environment variables or mup configuration, that I can force these to be rewritten as absolutes?

Many Thanks,
Dave

2

Are you using the bootstrap source and passing it through a pre-processesor like less?

If so you can just specify the @icon-font-path to use an absolute path

@icon-font-path: '/fonts/';

This is because bootstrap uses this variable to create the styles like so:

If you’re not, you could try using WebApp.connectHandlers to intercept the requests and re-write them?

3

Thank you @coagmano for getting me pushed in the right direction!

I tried switching from importing ‘bootstrap/dist/bootstrap.css’ in my client startup file, instead importing ‘boostrap/less/bootstrap.less’ and then overriding @icon-font-path in my own, subsequently-imported, less file. This worked locally, but had the same issue when deployed to my server.

In the end, I was able to use a plain-old CSS rule in my app’s top-level .css file to override the font paths…

Thanks again,
Dave

1 Like