webpack - roboto fuente google

¿Cómo incluir la fuente Roboto en la construcción del paquete web para la interfaz de usuario material?

Question

Para una aplicación web progresiva basada en Material UI (React) y construida con Webpack , ¿cómo incluyo correctamente las fuentes Roboto para que la aplicación no dependa de los servidores de Google y las fuentes también funcionen fuera de línea ?

• La página de instalación solo hace referencia a la página de fuentes de Google , pero eso obviamente obliga a las fuentes a descargarse de los servidores de Google.

• Existe un Problema de interfaz de usuario material similar con respecto a la fuente Roboto, pero aún se basa en que Google proporcione los archivos de fuente.

• Encontré un paquete de NPM que proporciona los archivos de fuente de Roboto , pero no estoy seguro de cómo incluir esos archivos ya que se proporcionan muchos estilos y formatos de fuente y no sé qué estilos realmente necesita la interfaz de usuario de Material . Además, la importación de esas familias de fuentes simplemente a través de @import parece tener problemas de rendimiento .

Entonces, ¿cuál es una solución buena y simple para agrupar los archivos Roboto correctos con mi aplicación?

Answer 1

Así es como mi equipo comenzó a incluir las fuentes Roboto en nuestro proyecto Webpack:

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

• Crea una carpeta ( /fonts ).
• Descarga todas las fuentes de Roboto de Font Squirrel y muévelas a /fonts .
• Crea el archivo CSS ( /fonts/index.css ). Obtuvimos los contenidos para 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 de archivos web-loader 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 de la siguiente manera:

webpack.conf.js:

loaders: [
  ..., {
    test: //.(woff|woff2|eot|ttf|svg)$/,
    loader: ''file?name=fonts/[name].[ext]''
  }
]

Importe el archivo css de la 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 de Roboto usa realmente UI material?

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

En el 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á usando DatePicker, probablemente debería estar seguro omitir eso. El estilo de letra cursiva no se usa en ningún lugar del proyecto, aparte del estilo de reducción de GitHub.

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

Answer 2

En caso de que la aplicación se haya iniciado con create-react-app , no tiene un archivo de configuración de webpack [visible]. En este caso, puede hacer lo siguiente:

1. crear / fuentes de directorio en / public

2. crea /public/fonts/fonts.css, que define las @font-faces

   @font-face { font-family: ''inglobal''; font-weight: normal; font-style: normal; src: url(''./OperatorMono.ttf''); }

3. Copiar archivos de fuentes

4. agregue <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> a /public/index.html''s

5. ¡Viva!

5 / b. Si, por algún motivo, todavía no funciona, cambie las extensiones de las fuentes a .css (también en src: url (''./ OperatorMono.css''))

Answer 3

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.