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.