2021-04-01
1180
#vue
Kelvin Gobo
40671
Apr 1, 2021 â‹… 4 min read

Best practices for loading fonts in Vue

Kelvin Gobo Software Engineer | Technical Writer | Football #MUFC

Recent posts:

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 â‹… 9 min read
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 â‹… 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 â‹… 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 â‹… 10 min read
View all posts

9 Replies to "Best practices for loading fonts in Vue"

  1. Doesn’t work for me. Font files get hashed for me so the link src tags in index.html don’t match after webpack processes those files.

    1. Your font files will get hashed if they are somewhere in the “src” folder. Put your fonts assets in the “public” folder as is in the tutorial and this should work.

    1. Your font files will get hashed if they are somewhere in the “src” folder. Put your fonts assets in the “public” folder as is in the tutorial and this should work.

  2. I changed the “href” path to “../fonts/Roboto/Roboto-Regular.woff2”. Note double dots in front. Not sure, but I think it has to do something with how static / relative files are processed by WebPack.

    1. Your font files will get hashed if they are somewhere in the “src” folder. Put your fonts assets in the “public” folder as is in the tutorial and this should work.

    1. Your font files will get hashed if they are somewhere in the “src” folder. Put your fonts assets in the “public” folder as is in the tutorial and this should work.

    2. Build will fail cause webpack can not find relative file in public folder, ./fonts/Roboto-Regular.woff referred in CSS file, which is in src/assets/
      Solution is to put fonts folder also into assets/ folder, and webpack build will work and font files ase copied into “public” or really dist/fonts on build. Also npm run serve will work too.

Leave a Reply