0

Preciso importar uma fonte local para meu projeto em Vue, e não estou obtendo sucesso. Tentei utilizando o @font-face, dessa maneira:

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.woff2') format('woff2');
    src: url('../fonts/Oxygen-Regular.woff') format('woff');
    font-weight: normal;
}

Coloquei sem o url, importei em um arquivo styles, e direto no componente App, tentei também colocando o font-face direto no componente que iria utilizar a fonte, e não deu certo. Alguém saberia me dizer a forma correta de importar fontes locais usando o Vue via cli?

6
  • deu certo a resposta?
    – novic
    Commented 13/02/2021 às 12:50
  • não deu, porque pra importar a fonte no @font-face, não estava funcionando. respondi abaixo como eu consegui Commented 17/02/2021 às 13:31
  • Olha a minha resposta foi testada no Vuejs e funcionou! não tem nada a ver com o que você disse na sua resposta!
    – novic
    Commented 17/02/2021 às 14:29
  • voce tá usando o vue-cli? por que o meu só funcionou assim, e estou usando o vue pelo vue-cli. a sua resposta não funcionou.. tem esse link aqui explicando isso tbm qastack.com.br/programming/42749973/… Commented 17/02/2021 às 19:50
  • sim é pelo vue-cli, funciona sim ... se está enganada, do jeito que você fez é o tradicional, mas, do outro jeito funciona.
    – novic
    Commented 17/02/2021 às 21:03

2 Respostas 2

1

Como está configurado as suas pastas? Você colocou as fontes dentro da pasta src?

São perguntas a serem feitas, então para configurar um fonte local siga o seguintes passos:

Crie uma pasta dentro da pasta src com o nome de fonts (src/fonts) e coloque os arquivos dessa fonte dentro dessa pasta.

Crie um arquivo app.scss dentro da pasta src com o código igual ao seu mas, com um pequena diferença em vez de dois pontos um ponto como está no código:

@font-face {
    font-family: 'Oxygen';
    src: url('./fonts/Oxygen-Regular.woff2') format('woff2');
    src: url('./fonts/Oxygen-Regular.woff') format('woff');
    font-weight: normal;
}

Para utilizar precisa agora importar para dentro da tag style do seu componente

<style>
    @import './app.scss';
</style>

Um outra forma no site SOEn

2
  • 1
    então, eu fiz uma pasta fonts dentro da minha pasta assets, localizada no src. e lá coloquei as fontes locais sim... apenas nao havia feito um arquivo para as fontes. vou testar dessa forma Commented 12/02/2021 às 19:08
  • então é ./assets/fonts entendeu ...
    – novic
    Commented 12/02/2021 às 21:50
0

Como consegui resolver:

  1. importando a fonte em um arquivo .scss através do @font-face, usando a seguinte sintaxe:
  @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('OpenSans-Regular-400'), url(~@/assets/fonts/OpenSans-Regular-400.woff) format('woff');
}

Descobri que no Vue usa-se a sintaxe ~@/pasta para escrever os caminhos dos arquivos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .