Como adicionar fontes externas

gabrieldev

Olá pessoal, tudo bem?
Queria saber como faz para adicionar fontes/tipografias novas no Maker5. Vi que ele tem as comuns do sistema no MasterSkin mas queria adicionar outras fora as que já existem. Poderiam me ajudar?

Fabrício Santana

Boa tarde

Para adicionar novas fontes ou tipografias no Maker 5 além das já disponíveis no MasterSkin, é possível seguir um processo simples e eficaz. Primeiramente, selecione as fontes desejadas e faça o download dos arquivos nos formatos suportados, como .ttf, .otf ou .woff. Em seguida, adicione esses arquivos ao projeto, preferencialmente em uma pasta específica, como resources/fonts, para facilitar a organização.

Depois de inserir os arquivos no projeto, defina as fontes utilizando CSS. No arquivo de estilo da aplicação, utilize a regra @font-face para registrar as novas fontes, especificando o caminho para os arquivos, bem como os formatos suportados. Por exemplo:

@font-face {
    font-family: 'NomeDaFonte';
    src: url('resources/fonts/nome_da_fonte.ttf') format('truetype');
}

Após a definição, aplique a nova fonte diretamente no MasterSkin ou em elementos específicos da aplicação, utilizando a propriedade font-family. Isso pode ser feito para o corpo da página ou para classes personalizadas, como no exemplo:

body, .classe-personalizada {
    font-family: 'NomeDaFonte', sans-serif;
}

Depois de configurar as fontes, é importante realizar testes para verificar sua aplicação e renderização nos diferentes navegadores e dispositivos utilizados pelos usuários. Garanta que a fonte seja carregada corretamente e que a aparência esteja de acordo com o esperado.

Por fim, tenha em mente alguns cuidados adicionais. Certifique-se de que as fontes sejam compatíveis com diferentes plataformas e otimizadas para a web, evitando problemas de carregamento ou lentidão na aplicação. Essa abordagem garantirá uma integração suave e profissional das novas tipografias ao projeto desenvolvido no Maker 5.