@comercti/fonts

Pacote oficial de fontes do Design System da Comercti, contendo a família completa de fontes Acumin Pro.

📦 Instalação

npm install @comercti/fonts

ou

yarn add @comercti/fonts

🚀 Como usar

1. Importação direta do CSS (Recomendado)

Vue.js

// main.js ou main.ts
import "@comercti/fonts/css";

// Agora você pode usar a fonte em seus componentes

<template>
  <div class="my-component">
    <h1>Título com Acumin Pro</h1>
  </div>
</template>

<style scoped>
.my-component {
  font-family: "Acumin Pro", sans-serif;
}

h1 {
  font-weight: 600; /* Semibold */
}
</style>

React/Next.js

// _app.js ou index.js
import "@comercti/fonts/css";

Nuxt.js

// nuxt.config.js
export default {
  css: ["@comercti/fonts/css"],
};

2. Importação via JavaScript

import { fontFamily, fontWeights, loadFonts } from "@comercti/fonts";

// Carregar fontes programaticamente
loadFonts();

// Usar em CSS-in-JS
const styles = {
  fontFamily: fontFamily,
  fontWeight: fontWeights.medium,
};

3. Importação via CSS

@import url("@comercti/fonts/css");

.my-text {
  font-family: "Acumin Pro", sans-serif;
}

📚 Pesos de fonte disponíveis

| Peso | Valor | Nome | | ----------- | ----- | ---------- | | Thin | 100 | Thin | | Extra Light | 200 | ExtraLight | | Light | 300 | Light | | Regular | 400 | Regular | | Medium | 500 | Medium | | Semibold | 600 | Semibold | | Bold | 700 | Bold | | Black | 900 | Black | | Ultra Black | 950 | UltraBlack |

Todos os pesos estão disponíveis tanto em estilo normal quanto itálico.

🎨 Exemplos de uso

CSS Puro

.title {
  font-family: "Acumin Pro", sans-serif;
  font-weight: 600; /* Semibold */
}

.subtitle {
  font-family: "Acumin Pro", sans-serif;
  font-weight: 400; /* Regular */
  font-style: italic;
}

.body-text {
  font-family: "Acumin Pro", sans-serif;
  font-weight: 300; /* Light */
}

Tailwind CSS

Se você estiver usando Tailwind CSS, adicione a fonte à sua configuração:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        acumin: ['"Acumin Pro"', "sans-serif"],
      },
      fontWeight: {
        thin: 100,
        extralight: 200,
        light: 300,
        regular: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
        black: 900,
        ultrablack: 950,
      },
    },
  },
};

Styled Components (React)

import styled from "styled-components";
import { fontFamily, fontWeights } from "@comercti/fonts";

const Title = styled.h1`
  font-family: ${fontFamily};
  font-weight: ${fontWeights.semibold};
`;

const Text = styled.p`
  font-family: ${fontFamily};
  font-weight: ${fontWeights.regular};
`;

CSS Modules

/* styles.module.css */
.title {
  font-family: "Acumin Pro", sans-serif;
  font-weight: 600;
}

import styles from "./styles.module.css";
import "@comercti/fonts/css";

function MyComponent() {
  return <h1 className={styles.title}>Meu título</h1>;
}

🔧 API

Constantes

• fontFamily: String com a família de fontes e fallbacks
• fontWeights: Objeto com todos os pesos disponíveis

Funções

• loadFonts(): Carrega as fontes programaticamente
• generateFontClasses(): Gera classes CSS utilitárias

📁 Estrutura do pacote

@comercti/fonts/
├── fonts/              # Arquivos de fonte (.woff, .woff2)
├── stylesheet.css      # Definições @font-face
├── index.js           # Ponto de entrada principal
├── package.json       # Metadados do pacote
└── README.md         # Documentação

🌍 Suporte a navegadores

• Chrome/Chromium 36+
• Firefox 39+
• Safari 12+
• Edge 79+

📄 Licença

ISC

🤝 Contribuição

Este pacote é mantido pela equipe da Comercti. Para sugestões ou problemas, abra uma issue no repositório oficial.

Desenvolvido com ❤️ pela equipe Comercti