1

Tengo los siguientes fonts:

Rubik-Bold.ttf
Rubik-MediumItalic.ttf
Rubik-Black.ttf

Quiero usar estos fonts por ejemplo en cada uno:

<p class="bold">Hola</p>
<p class="medium">Hola</p>
<p class="black">Hola</p>

Supongo que tendré que hacer en mi app.css algo así

@font-face { */
  font-family: 'Rubik-Bold.ttf'; 
}

y ese fichero .ttf tenerlo a la misma altura de mi app.css, pero imaginemos que tengo 30 ficheros .ttf en una carpeta,

¿Hay alguna forma de importarlos más fácil?

1 respuesta 1

3

Hola en realidad no si te basas en el ejemplo:

<p class="bold">Hola</p>
<p class="medium">Hola</p>
<p class="black">Hola</p>

solo podrías definirse la fuente para cada clase y listo:

.bold {
  font-family: url('Rubik-Bold.ttf'); 
}

Ahora bien si quieres usar @font-face, lo puedes hacer de la siguiente manera:

@font-face { 
    font-family: 'Rubik'; 
    src: url('Rubik-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face { 
    font-family: 'Rubik'; 
    src: url('Rubik-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face { 
    font-family: 'Rubik'; 
    src: url('Rubik-Black.ttf');
    font-weight: 300;
    font-style: normal;
}


.bold, .medium, .black {
    font-family: 'Rubik';
}

.bold {
    font-weight: bold;
}

.medium {
    font-weight: 500;
}

.black {
    font-weight: 300;
}

Tema de ficheros, puedes tenerlos en rutas relativas y usar path

/css
    style.css
/fonts
    /Rubik
        Rubik-Black.ttf

Por ejemplo para usar Rubik-Black.ttf en style.css haría lo siguiente

@font-face {
    font-family: 'Rubik',
    src: url('../fonts/Rubik/Rubik-Black.ttf');
}

De todos modos si puedes mejor usa un CDN para almacenar tus archivos estáticos como fuentes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.