Como usar fuentes personalizadas con CSS

Hola tyros, hoy les voy a mostrar como usar fuentes personalizadas en nuestras páginas web.

Sucede que en mi trabajo se utiliza una fuente personalizada, y la verdad no tenía ni idea de como aplicarla. Me puse a investigar y aquí les explico como le hice.

Lo primero es tener bien organizados los archivos, esta es mi organización:



Así sería el código CSS:

@font-face{
    font-family: "Novencento-Wide-Bold";
    src: url("../fonts/Novecentosanswide-Bold-webfont.ttf") format("truetype");
}
@font-face{
    font-family: "Novencento-Wide-Light";
    src: url("../fonts/Novecentosanswide-Light-webfont.ttf") format("truetype");
}
@font-face{
    font-family: "Helvetica-Light";
    src: url("../fonts/Helvetica-Light.ttf") format("truetype");
}
@font-face{
    font-family: "Helvetica-Bold";
    src: url("../fonts/Helvetica-Bold.ttf") format("truetype");
}
body{
    font-family: Helvetica-Light;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
}

No hay comentarios:

Publicar un comentario