0
493
VistasCannot import font-face in scss
I am attempting to import google font in my project.
This is what I expect:
Actual Result:
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
1 Respuestas
Responde la pregunta0
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");