I previously setup Gulp to use Sass, Pug and Babel. The fonts loaded fine. I switched to using Parcel now and it's working as expected, except one thing. The fonts arent loading in.
Here is the entirety of _fonts.sass:
@font-face
font-family: "MyWebFont"
src: url(../fonts/economica-regular-otf.eot)
src: url(../fonts/economica-regular-otf.eot?#iefix) format("embedded-opentype"),
url(../fonts/economica-regular-otf.woff2) format("woff2"),
url(../fonts/economica-regular-otf.woff) format("woff"),
url(../fonts/economica-regular-otf.ttf) format("ttf")
@font-face
font-family: "MyWebFontBold"
src: url(../fonts/economica-bold-otf.eot)
src: url(../fonts/economica-bold-otf.eot?#iefix) format("embedded-opentype"),
url(../fonts/economica-bold-otf.woff2) format("woff2"),
url(../fonts/economica-bold-otf.woff) format("woff"),
url(../fonts/economica-bold-otf.ttf) format("ttf")
body
font-family: 'MyWebFont', 'Titillium Web', sans-serif
text-rendering: auto
text-rendering: geometricPrecision
Folder strcuture is as follows:
/dist
/src
-- / pug
--- index.pug
-- / sass
--- _fonts.sass
--- _animations.sass
--- _blocks.sass
--- _elements.sass
--- styles.sass
-- / js
--- // all the scripts
-- / fonts
--- // all the fonts are here
You can find the project files here ('new' branch): GitHub
I fixed this a while back.
In package.json I edited the build script to be "build": "parcel build src/pug/index.pug --public-url ./ -d dist".
Then I edited _fonts.sass so @font-face doesn't go up a directory. For example, src: url(../fonts/economica-regular-otf.eot) became src: url(./fonts/economica-regular-otf.eot).
It has been a while now since I figured this out so I don't remember the reasoning behind this, but it worked.