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:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 â‹… 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 â‹… 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 â‹… 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 2024 â‹… 8 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