0

I'm working in Vue.js and I have a few font files in a folder that I am supposed to use for the project. How could I add these fonts to the website's UI? Would I have to install them? Or would I simply add the actual files into the HTML file of vue.js template?

albert_anthony6
  • 594
  • 2
  • 9
  • 30

1 Answers1

1

Just use them in a css file like you would on any web page or style part of a single file component.

E.g. html, body { font: 17px/20px Arial }

You will need to provide a path to the font file if it is not a system font like Arial. In case the file is from web cdn like google fonts you provide a link, and in case it is a local file a path to the file. You can do both through @font-face rule. See moz docs for more info.

@font-face {
  font-family: "SomeName";
  src: url("./fonts/OpenSans-Regular-webfont.woff") format("woff");
}

html, body {
  font: 17px/20px SomeName;
}

Mind the dot in front of the url. It stands for relative path. You can use ./foo/bar for "from this location", ../ to go up a folder, and depending on your configuration, @/ to start from project src folder. So you would look for a font with e.g. @/font/myfont.ttf where there is a font folder in a src folder.

Or in case of cdn font

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
n-smits
  • 685
  • 7
  • 20
  • Could you tell me how to import an SVG to my header component? – albert_anthony6 May 22 '20 at 20:29
  • 1
    Sure, but I don't have enough info from that to know what you mean. Try asking a separate question. In short, here are some options a) check out [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader), b) just include it in the template, svg is html compliant and you can just paste it in, c) build a simple icon system, if it's for icons as opposed to a logo. – n-smits May 22 '20 at 20:35
  • Here's the link to the question: https://stackoverflow.com/questions/61963416/vue-js-how-to-import-svg-logo – albert_anthony6 May 22 '20 at 20:36