Código
<head> <link rel="stylesheet" href="css/fonts.css"> </head>
Ok, ahora ya tendrás las fuentes cargadas, desde local, así te aseguras de que no se modificarán en un futuro. Así también puedes eliminar el @import de index.css
Para el responsive design, este trabaja con @media (media querys).
https://foro.elhacker.net/desarrollo_web/responsive_web-t506895.0.html;msg2228589#msg2228589
Citar
Pd:la resolucion del video es 3840 × 2160 píxeles
El responsive como lo queres, para pantallas >3840 px o <3840? En el ejemplo del otro post, puse max-width:600px que en ese caso era para moviles con resolucion de ancho <600px. Prueba en tu caso @media (max-width:3840)