Buen día, ¿alguien sabe por qué no lee la fuente de Ubuntu? Tengo el código igual que el profe sin embargo en el CSS no se lee la Font . ...

Sebastian Moreno Olivera

Sebastian Moreno Olivera

Pregunta
student
hace 4 años

Buen día, ¿alguien sabe por qué no lee la fuente de Ubuntu? Tengo el código igual que el profe sin embargo en el CSS no se lee la Font

.

webpack.config.js

use: { loader: 'url-loader', options: { limit: 10000, mimetype: "application/font-woff", name: "[name].[contenthash].[ext]", outputPath: "./assets/fonts/", publicPath: "./assets/fonts/", esModule: false, },

cc

@font-face { font-family: 'ubuntu'; src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'), url('../assets/fonts/ubuntu-regular.woff') format('woff'); font-weight: 400; font-style: normal; }
body { background-color: #f9f9f9; font-family: sans-serif, ubuntu; }
5 respuestas
para escribir tu comentario
    Miguel Angel Choque Pacompia

    Miguel Angel Choque Pacompia

    student
    hace 4 años

    Puedes Utilizar esto, ya viene en webpack 5

    { test: /\.(woff|woff2)$/i, // Tipos de fuentes a incluir type: 'asset/resource', // Tipo de módulo a usar (este mismo puede ser usado para archivos de imágenes) generator: { filename: 'static/fonts/[hash][ext][query]', // Directorio de salida }, }

    para aplicar la fuente

    body { background-color: #f9f9f9; font-family: Ubuntu, sans-serif; }```
    Miguel Angel Choque Pacompia

    Miguel Angel Choque Pacompia

    student
    hace 4 años

    Tienes un error al aplicar la fuente,

    primero se agrega la fuente a usar y luego la fuente por defecto que es sans-serif

    lo correcto seria

    font-family: Ubuntu, sans-serif; ```
    Sebastian Moreno Olivera

    Sebastian Moreno Olivera

    student
    hace 4 años

    @miguelangel22 Buenas tardes.

    Trate de solucionar como me indicaste sin embargo la fuente aún no se aplica, es un poco extraño.

    test: /\.(woff|woff2)$/i, type: "asset/resource", generator: { filename: "stactic/fonts/[hash][ext][query]", }, use: { loader: 'url-loader', options: { limit: 10000, mimetype: "application/font-woff", name: "[name].[contenthash].[ext]", outputPath: "./assets/fonts/", publicPath: "./assets/fonts/", esModule: false, },```
    Miguel Angel Choque Pacompia

    Miguel Angel Choque Pacompia

    student
    hace 4 años

    ya no es necesario que uses el url-loader, en la seccion de rules solo usa esto

    rules: [ ... { test: /\.(woff|woff2)$/i, type: 'asset/resource', generator: { filename: 'assets/fonts/[hash][ext][query]', }, }, ]

    filename es tu carpeta de salida

    Yusmary Rojas

    Yusmary Rojas

    student
    hace 4 años

    gracias Miguel tenia el mismo problema esto lo soluciono

Curso de Webpack [Empieza Gratis]

Curso de Webpack [Empieza Gratis]

Construye aplicaciones React usando Webpack. Aprende a configurar y optimizar tu entorno de desarrollo con loaders, compresión CSS y análisis de paquetes. Despliega tu proyecto fácilmente en producción y mejora el rendimiento.

Curso de Webpack [Empieza Gratis]
Curso de Webpack [Empieza Gratis]

Curso de Webpack [Empieza Gratis]

Construye aplicaciones React usando Webpack. Aprende a configurar y optimizar tu entorno de desarrollo con loaders, compresión CSS y análisis de paquetes. Despliega tu proyecto fácilmente en producción y mejora el rendimiento.