¿Cómo incluir la fuente Roboto en la compilación del paquete web para Material UI?

Si encuentras alguna incompatibilidad en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes subir el código al trabajo final.

Solución:

Así es como mi equipo incluyó las fuentes Roboto en nuestro proyecto Webpack:

Descargue las fuentes Roboto y cree un archivo CSS en una carpeta específica de fuentes

• Crea una carpeta (/fonts).
• Descargue todas las fuentes Roboto de Font Squirrel y muévalas a /fonts.
• Cree el archivo CSS (/fonts/index.css). Obtuvimos el contenido de este archivo de este tutorial.

index.css:

* 
  font-family: Roboto, sans-serif;  


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-LightItalic-webfont.eot');
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-LightItalic-webfont.woff') format('woff'),
         url('Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;


@font-face 
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic-webfont.eot');
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-MediumItalic-webfont.woff') format('woff'),
         url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;

Utilice el módulo de paquete web del cargador de archivos para cargar los archivos de fuentes para que el paquete web pueda reconocerlos

• npm install --save file-loader (https://www.npmjs.com/package/file-loader)
• En la configuración de su paquete web, use el cargador así:

webpack.conf.js:

loaders: [
  ..., woff2
]

Importe el archivo css de fuente en la entrada principal de la aplicación

App.js:

import './fonts/index.css';

Y eso es. La fuente predeterminada de su aplicación ahora debería ser Roboto.

EDITAR: ¿Qué fuentes Roboto utiliza realmente Material-UI?

Parte de esta pregunta es determinar el derecho Fuentes Roboto para incluir en el proyecto ya que la totalidad de las fuentes Roboto es de casi 5 MB.

En el archivo README, las instrucciones para incluir Roboto apuntan a: fonts.google.com/?selection.family=Roboto:300,400,500. Aquí, 300 = Roboto-Light, 400 = Roboto-Regular y 500 = Roboto-Medium. Estos corresponden a los pesos de fuente definidos en el archivo typography.js. Si bien estos tres pesos de fuente representan el uso en casi la totalidad de la biblioteca, hay una referencia a Regular-Bold en DateDisplay.js. Si no está utilizando DatePicker, probablemente debería estar seguro de omitirlo. El estilo de fuente en cursiva no se usa en ninguna parte del proyecto, aparte del estilo de rebajas de GitHub.

Esta información es precisa al momento de escribir este artículo, pero puede cambiar en el futuro.

También puede hacerlo como está documentado en este número: https://github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save

Luego, en su index.js:

import 'typeface-roboto'

Funciona con webpack / create-react-app.

Si usa Angular, donde import 'typeface-roboto' no es ideal y fácil, puede hacerlo un poco diferente a lo sugerido aquí.

Primero, instale este paquete npm agradable como lo describen otros:

npm install typeface-roboto --save

Entonces solo agrega esto a tu angular.json:

"styles": [
  "node_modules/typeface-roboto/index.css",
  [...],
  "src/styles.css"
],

Tienes la opción de añadir valor a nuestro contenido aportando tu experiencia en las explicaciones.

---

---

Utiliza Nuestro Buscador