search

cearls / timberland

A modern WordPress theme using Timber, Advanced Custom Fields Pro, Vite, Tailwind and Alpine.js
MIT License
82 stars 21 forks source link

Font Face Issue - can't install custom font #17

Closed RichForever closed 2 years ago

RichForever commented 2 years ago

Hi, I'm trying to install my custom font. So, I placed all .woff etc files inside directory theme/assets/fonts/. Inside theme/assets/styles I created directory components and inside this folder I have file called fonts.css that I'm importing inside app.css file. Sample structure my font css file below:

@font-face { font-family: 'New Order'; src: url('../fonts/NewOrder-Light.woff2') format('woff2'), url('../fonts/NewOrder-Light.woff') format('woff'), url('../fonts/NewOrder-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }

When I go to the website, my console log throws me an errors with 404 error and node console throw errors like Can't resolve './fonts/NewOrder-Light.woff2' in '/Applications/MAMP/htdocs/example/wp-content/themes/example/theme/assets/styles'. I'm working with mamp so my current website url is http://localhost:8888/example but the error say that the path is http://localhost:8888/fonts/NewOrder-Medium.woff?732726a097afc95d3aa3ab37099ee6e9. I checked the build directory. The fonts are there. I tried with many variations with paths inside my fonts.css file but without any luck. Can you help me with that?

Also second questions (I don't want to create another issue for that kind of thing). What's the purpose of theme.css file? Should I place all my custom code (rules, imports etc) in this file instead of app.css?

@edit When I type absolute path to my font like /example/wp-content/themes/example/theme/assets/build/fonts/ it's working but it's not exactly what I'm looking for. When I move website to public server my path will be different. Is there any way to get it work? Or should I enqueue fonts file separately with twig?

RichForever commented 2 years ago

Ok, seems like the.options({ processCssUrls: false }) solved my problem. Now everything is working fine :)