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:

how API client automation can save you hours in development

How API client automation can save you hours in development

Learn how OpenAPI can automate API client generation to save time, reduce bugs, and streamline how your frontend app talks to backend APIs.

Lewis Cianci
Jul 1, 2025 â‹… 7 min read
Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 2025 â‹… 7 min read
​​How HTML’s Selectedcontent Element Improves Dropdowns

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

Temitope Oyedele
Jun 27, 2025 â‹… 6 min read
advanced caching in Node.js with Valkey

How to get faster data access in Node.js with Valkey

Learn how to implement an advanced caching layer in a Node.js app using Valkey, a high-performance, Redis-compatible in-memory datastore.

Muhammed Ali
Jun 27, 2025 â‹… 7 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