Utilize custom fonts from your local directory within a Vite Vue3 project

Inside my main.scss file, I am loading local fonts from the assets/styles/fonts folder:

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Opensans-Light';
  font-style: normal;
  src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');
}

Next, in my vite.config setup, I make sure to include main.scss:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/assets/styles/main.scss";`
    }
  },
},

However, while most of the CSS from main.scss is applied correctly, the fonts seem to be causing an issue. I receive the following error message:

downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf

Is this the right approach or should I consider a different method? (similar works with Vue-CLI)

cssvue.jsvuejs3vite

Answer №1

That was the correct method, the answer lies in using the relative path like this:

src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');

Additionally, you need to define an alias in your vite.config.js file :

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
}

Answer №2

Successfully getting it to function, I achieved by placing the fonts in a public directory at the root level.

This is how it looked:

public/.**.ttf
src/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The object displays a value when inspected in the console, but appears as null when checked in the controller (Laravel)

In my form object, I have the following fields: { form: { a: '', b: '', c: '', d: '', e: '', f: '', g: '' } } When I chec ...

laravelvue.js

Display a thumbnail image using a v-for loop

Looking for help with implementing a photo preview in my code using BootstrapVue. The Vue devtools show that the form-file contains the image, but my 'watch' isn't functioning properly. Any assistance would be greatly appreciated! Here is ...

javascriptvue.jsvuejs2bootstrap-vue

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

javascripthtmlcsswebkit

Flexbox alignment issue: Text is not vertically centered

I'm facing an issue with centering my content vertically. Upon inspecting the divs, I noticed some empty space below them that seems to be causing the problem. When I tried adding <line-height: 3> in the dev tool styles, it seemed to center prop ...

htmlcssflexbox

Image is overlaid by Dropdown Menu

Today I had a strange encounter on my website LiveGreen Whenever I hover over the Menu Services, the dropdown menu goes under the image section below it. I've tried every possible solution like adjusting positioning and z-index, and searched extensiv ...

htmlcss

Adjust the route display according to the name of the route

I am currently using google maps in a div, and I want to switch the view to another one when changing routes. I attempted to achieve this with the code below, but it did not work as expected. .map-col(ref="mapCol" v-if="route.name == ' ...

vue.jsvuejs2vuejs3vue-routervue-router4

In search of a way to implement a conditional class binding within the current project

I am working on enhancing a child component within an existing Vue project. My goal is to allow users to add custom classes to the child component. I typically use :class="customClasses" in the dom-element for this purpose. However, there is alre ...

vue.js

Curating personalized designs within a content management system

Currently, I am developing a SaaS platform that will feature customized styles for user accounts. The current method involves using YAML to create unique stylesheets for each account. However, as the number of accounts increases, I am starting to question ...

csscontent-management-systemsaas

Establishing connections between HTML and CSS files

After writing my html and css code, I noticed that the files are not linking properly. Despite checking for errors, I couldn't find any issues within the codes. Here is a snippet of my html file: <!DOCTYPE html> <html lang="en" dir= ...

htmlcss

Having issues with Attributes.Add() function on ASP.NET platform

After adding CSS through code behind in asp.net on page_load, it works perfectly on my local environment but fails to work on the server. Here is the code snippet for your reference: protected void Page_Load(object sender, EventArgs e) { string selec ...

c#cssasp.net

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

javascriptcsshtml

Styling errors in AngularJS validation code

I am facing an issue with the code below that generates 3 text boxes. When I click on one text box, all 3 of them get focused, despite having different name and label values. <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]"> <div ...

htmlcssangularjsvalidationng-class

Tips for closing a modal in Bootstrap after a function has been executed using the Vue 3 Composition API

Currently, I have successfully integrated Bootstrap 5 into my Vue3 web application by using the command npm install bootstrap. Everything is working fine with a particular function, but I would like to automatically close the modal once this function is e ...

vuejs3bootstrap-5vue-composition-apibootstrap5-modal

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

javascripthtmlioscssiphone

Is there a way to exclusively utilize `mapGetters` within the computed section without including it in the data section? Also, what should be the designated name for the set?

Here is a screenshot I found related to mapGetters Link to the original question with the screenshot I recently came across a Vue.js post where an interesting answer caught my attention. The response suggested this approach: Within your Component compu ...

vue.jsvuejs2vue-componentvuexcomputed-properties

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

javascripthtmlbackgroundcss

Incorporating an HTML element into a Vue template

I'm currently utilizing a chart component (Chartist) that needs an HTML element to serve as a parent during SVG rendering. The elements that the chart requires are generated within a v-for loop, meaning they are not part of the DOM when the chart is ...

javascriptvue.jschartist.js

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

javascriptjqueryhtmlcss

Can you explain the distinction between using a period in a class selector and not using one?

Could someone please clarify the meaning of the code snippet below? <div class="cls1 cls2">abcd <div class="cls2"> adfffff </div> </div> .cls1 { background-color: yellow; } /*sample1 .cls1.cls2 { color: red; } */ /* ...

htmlcsscss-selectors

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

jquerycsstwitter-bootstrapresponsive-design