Para adicionar uma fonte personalizada ao seu aplicativo Ionic 7, você pode seguir os seguintes passos:
1 – Criando diretório no projeto Ionic 7
Vamos criar um novo diretório na pasta src/assets/ com o nome de fonts:
2 – Baixando as fonts
Nesse exemplo iremos utilizar o website google fonts para baixar nossa fonte de exemplo.
Clique em baixar Download family para baixar, e após o download descompacte o conteúdo.
3 – Adicionando as fontes ao projeto
Após extrair as fontes, iremos criar um novo diretório dentro da pasta fonts com o nome da nossa fonte.
O caminho ficará assim: src/assets/fonts/mulish
4 – Editando global.scss do projeto
Abra o arquivo
no seu editor de código.
Adicione o seguinte código CSS ao arquivo
para importar a fonte personalizada:
@font-face { font-family: 'Mulish-Light';
src: url('../../appShopping/src/assets/fonts/Mulish/Mulish-Light.ttf');
}
Certifique-se de substituir a font-family pelo nome da sua fonte e a URL pelo caminho do arquivo da sua fonte.
4 – Usando a nova fonte
Em seguida, você pode usar a fonte personalizada em qualquer lugar do seu aplicativo Ionic 7, definindo o atributo
com o nome da fonte.
Por exemplo, se você quiser usar a fonte personalizada no atributo
da homepage, basta você acessar o arquivo
e modificar a propriedade
como na figura abaixo:
Após realizar essas etapas, a fonte personalizada deve estar disponível em seu aplicativo Ionic 7 e poderá ser usada conforme necessário.
