Párrafo con fuente tipo Roboto

Las versiones previas de CSS tenían una gran limitación: la imposibilidad de utilizar fuentes personalizadas. Es cierto que bastaba con utilizar la propiedad font-family y especificar el nombre de la fuente a utilizar. Pero resulta que no era tan bonito como podía parecer en un principio. Por varias razones:

• Las fuentes especificadas mediante la propiedad font-family debían estar instaladas en el sistema donde se visualizaba la página web. En el ejemplo superior y al contrario que Times New Roman o Georgia (las cuales venían de serie en un sistema Windows), la tipografía Vegur no viene instalada de serie en Windows. Así pues, nosotros (y los usuarios con esa fuente instalada) veríamos la página web con dicha tipografía, pero en el navegador de otro usuario que no la tenga, no se encontraría la fuente y se pasaría a la siguiente alternativa (Times New Roman), y así sucesivamente.
• Otro de los problemas que existían se basa en el mismo problema, pero con matices diferentes. Mientras que las tipografías que vienen en sistemas como Microsoft Windows de serie (Times New Roman, Verdana, Tahoma, Trebuchet MS...) se verían correctamente en navegadores con dicho sistema operativo, no ocurriría lo mismo en dispositivos con GNU/Linux o Mac. Y lo mismo con tablets o dispositivos móviles. Esto ocurre porque frecuentemente dichas tipografías son propietarias y tienen licencias que permiten usarse sólo en dispositivos de dicha compañía.

En definitiva, aunque teníamos los mecanismos, era complicado conseguir cambiar la fuente y obtener el mismo resultado de diseño en todos los navegadores y sistemas disponibles. Actualmente, todo esto ha cambiado debido a CSS3 y la regla @font-face, la cual permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Todo ello de forma transparente al usuario.

Fuente: https://lenguajecss.com/p/css/propiedades/fuentes-y-tipografias