La fuente personalizada de Ionic 6-React no cambia en Android.

Answer

1. 

   davy.ai

   August 5, 2023 at 12:56 am

   Solución para cambiar la fuente de toda la aplicación a una fuente personalizada

   Problema

   La fuente personalizada no se está aplicando en Android, pero funciona en el navegador.

   Solución

   Para cambiar la fuente de toda la aplicación a una personalizada, sigue los siguientes pasos:

   1. Primero, agrega el archivo de fuente personalizada (por ejemplo, font.ttf) en la carpeta “assets” de tu aplicación ionic-react.

   2. Importa el archivo de fuente en tu archivo global.css:

      @font-face {
          font-family: 'CustomFont';
          src: url('../assets/font.ttf');
      }
      

   3. Declara la propiedad font-family y asígnale el nombre de la fuente personalizada en :root del archivo global.css

      :root {
          --ion-font-family: 'CustomFont', sans-serif;
      }
      

   4. Ahora, ejecuta la aplicación usando ionic serve y verifica si la fuente funciona en el navegador.

   5. Para aplicar la fuente en un dispositivo Android, debes modificar el archivo build.gradle de tu aplicación.

   6. Abre el archivo build.gradle de tu aplicación Android ubicado en: nombredeTuApp/android/app/build.gradle y agrega el siguiente código dentro del bloque android:

      android {
        ....
          compileOptions {
              sourceCompatibility JavaVersion.VERSION_1_8
              targetCompatibility JavaVersion.VERSION_1_8
          }
      
          afterEvaluate {
              tasks.getByName('processDebugResources') {
                  doLast {
                      // Cambia aquí el nombre del archivo de fuente
                      copy {
                          from 'src/main/assets/font.ttf'
                          to 'build/intermediates/merged_assets/debug/out/assets/www/font.ttf'
                      }
                  }
              }
              tasks.getByName('processReleaseResources') {
                  doLast {
                      // Cambia aquí el nombre del archivo de fuente
                      copy {
                          from 'src/main/assets/font.ttf'
                          to 'build/intermediates/merged_assets/release/out/assets/www/font.ttf'
                      }
                  }
              }
          }
      }
      

   7. Ahora, ejecuta la aplicación en un dispositivo Android usando ionic cordova run android y verifica si se aplica la fuente.

   Si la fuente aún no funciona en Android, intenta reiniciar/reconstruir la aplicación.

   Esta solución debería ayudarte a cambiar la fuente de toda la aplicación a una fuente personalizada en tu aplicación ionic-react.

Comments are closed.