Fontero é um gerenciador de fontes personalizadas desenvolvido em Next.js, permitindo que você faça upload, visualize, gerencie e utilize diferentes fontes para criar e exportar designs personalizados. Ideal para designers, desenvolvedores e qualquer pessoa que deseje manipular textos com fontes customizadas diretamente no navegador.
- Upload de fontes personalizadas: Suporte a formatos
.ttf,.woff,.woff2e.otf. - Visualização instantânea: Pré-visualize textos com as fontes carregadas.
- Gerenciamento de fontes: Adicione, remova e alterne entre fontes facilmente.
- Edição de textos: Crie múltiplos textos, ajuste tamanho, cor, peso e família tipográfica.
- Exportação: Baixe o design como SVG.
- Tema claro/escuro: Interface ajusta-se automaticamente ao tema do sistema.
- Responsividade: Otimizado para desktops — mensagem informativa é exibida em telas menores.
Clone o repositório e instale as dependências:
git clone https://github.com/mariosalembe23/fontero.git
cd fontero
npm installInicie o servidor de desenvolvimento:
npm run dev
# ou
yarn dev
# ou
pnpm dev
# ou
bun devAbra http://localhost:3000 no seu navegador para ver o resultado.
- Adicione uma fonte: Clique para fazer upload de um arquivo de fonte suportado.
- Crie um texto: Adicione e edite textos, escolhendo fonte, tamanho, cor e peso.
- Gerencie e remova fontes: Remova fontes carregadas ou altere as fontes dos textos facilmente.
- Exporte seu design: Baixe como SVG para utilizar em outros projetos.
- Next.js (React)
- Redux Toolkit para gerenciamento de estado
- opentype.js para manipulação de fontes
- Tailwind CSS para estilização
- sonner para notificações
- O projeto utiliza
next/fontpara otimização automática de fontes. - Em telas menores, o uso é restrito e uma mensagem orienta o usuário a utilizar um dispositivo compatível.
A maneira mais fácil de publicar sua aplicação Next.js é na Vercel.
Veja mais em documentação de deploy do Next.js.