CODEWITHSUNDEEP
javascriptcssvue.jssassfonts
CCCC
CCCC

Reputation: 6481

Cannot import font-face in scss

I am attempting to import google font in my project.

This is what I expect:
enter image description here

Actual Result:
enter image description here

App.vue

<template>
  <div id="app">Luckiest Guy</div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped lang="scss">
@import "./assets/scss/main.scss";

#app {
  font-family: "Luckiest Guy", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.scss

@import '../fonts/fonts.scss';

fonts.scss

@font-face {
  font-family: 'Luckiest Guy';
  src: url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
}

Codesandbox:
https://codesandbox.io/s/dazzling-frost-2mbuf?file=/src/App.vue

Update 1
 I also tried to use downloaded otf, but not working

fonts.scss

@font-face {
   font-family: 'Luckiest Guy';
   src: url('<The relative path of the otf>');
}

Update 2

I also tried to use downloaded otf, but not working

@font-face { font-family: 'Luckiest Guy'; src: url('./LuckiestGuy-Regular.ttf'); }

Codesandbox:
https://codesandbox.io/s/dazzling-frost-2mbuf?file=/src/assets/fonts/fonts.scss

Upvotes: 1

Views: 2025

Answers (1)

Markiesch
Markiesch

Reputation: 759

When importing fonts with google fonts you can use the import url or you can download the font. Currently you are importing css code which contains:

/* latin */

@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/luckiestguy/v11/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Now you are using this code in your @font-face src property, there are 3 ways to fix this issue:

Use the same url

one option is to use the same URL google uses (https://fonts.gstatic.com/s/luckiestguy/v11/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2)

Download locally

an other option is to download the font locally and save it in your project, then use font-face to import it in your scss. You can download a font (on google fonts) by clicked the download family button in the top right corner (https://fonts.google.com/specimen/Luckiest+Guy), then you can put these files anywhere in your project and instead of using htts://... in your src you will need to navigate to that folder

Use google's import url

the last and easiest option is to import css with the link:

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");

Upvotes: 0

Related Questions