External fonts in folder

sage
1

Hi there,

(I actually had this issue last year, and never figured it out, so have been copy/pasting from /assets/ to /dist/ since then!).

I’m using some Typography.com fonts, and the way they work (frustratingly) is to provide you with a JS snippet for you site’s head region (pretty standard), but also a folder, named with a random number (in my case 569789), containing production CSS for the fonts, like so:

Screen Shot 2017-05-05 at 11.29.38.png738×623 152 KB

Typography.com then asks you to let them know the location of this folder on your server (so http://mysite.com/wp-content/themes/mytheme/dist/fonts/569789/), and everything works.

Easy, right? :expressionless:

What I’m trying to figure out how to do is:
Can I place my 569789 folder in /mytheme/assets/fonts/ (so, /mytheme/assets/fonts/569789/), and have this folder, and its contents, somehow pulled into /mytheme/dist/fonts/ upon running npm run build:production ?

Thanks!
Lloyd

2

In dist/assets.json versions are appended to the paths after running gulp,
maybe you could use this place for controlling what version numbers are used.

3

Thanks for the response!

Apologies if I’ve missed something, but I’m using webpack, not gulp.

My issue isn’t versioning; I just want a folder and its contents to copy from its location in assets to its relative location in dist.

4

When copying the font files, why not also subset the characters or simply minify the fonts?
What sage release are you using?

5

I’m not able to, as Typography.com’s servers need to read them (I think for some licensing nonsense), so my use case is quite specific in needing to copy from assets to dist.

I’m using the Sage 9 beta, before Yarn was added (so, webpack).

6

Why not use a webpack plugin for copying?

1 Like
7

Ah-ha! That solves it perfectly.

I added this to the release part of my webpack file:

webpackConfig.plugins.push( new CopyWebpackPlugin( [ {
		from: 'fonts/569789',
		to: 'fonts/569789'
	} ] ) );

Cheers!