bug:

[Pra3t0r5]

Bug Report

Ionic version: [ ] 4.x [x] 5.3.3

Current behavior: No matter what i do, there is no way to make iOS Simulator load the custom fonts.

I've tested everything I've found across different Ionic versions and all platforms and the current setup works perfectly in Google Chrome Browser, Safari Browser, Android Device and Android Emulator but not in iOS Simulator (could not test it in iOS Device since i don't have one yet).

No custom font dependent component is shown except when commenting its font styling (second image).

1. result of steps to reproduce in mac with iOS simulator
2. commenting the font style

Expected behavior: Fonts loaded correctly like in any other tested platform: Image reference

Steps to reproduce:

1. in project root: ionic cordova build ios
2. click run in xcode

Related code:

• Angular-Ionic mandatory global.scss (with repeated styling just to test if its correctly loaded only from certain sources)

  
  // http://ionicframework.com/docs/theming/
  @import '~@ionic/angular/css/core.css';
  @import '~@ionic/angular/css/normalize.css';
  @import '~@ionic/angular/css/structure.css';
  @import '~@ionic/angular/css/typography.css';

@import '~@ionic/angular/css/padding.css'; @import '~@ionic/angular/css/float-elements.css'; @import '~@ionic/angular/css/text-alignment.css'; @import '~@ionic/angular/css/text-transformation.css'; @import '~@ionic/angular/css/flex-utils.css'; @import '~animate.css/animate.min';

@font-face { font-family: "Gotham";
src: local('GothamMedium'), local('GothamMedium'), url('assets/GothamMedium.eot') format('embedded-opentype'), url('assets/GothamMedium.woff2') format('woff2'), url('assets/GothamMedium.woff') format('woff'), url('assets/GothamMedium.ttf') format('truetype'), url('assets/GothamMedium.svg#GothamMedium') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: "Gotham"; src: local('GothamBold'), local('GothamBold'), url('assets/GothamBold.eot') format('embedded-opentype'), url('assets/GothamBold.woff2') format('woff2'), url('assets/GothamBold.woff') format('woff'), url('assets/GothamBold.ttf') format('truetype'), url('assets/GothamBold.svg#GothamBold') format('svg'); font-weight: bold; font-style: normal; }

@mixin font($weight, $size: false, $shadow: false, $align: false) { font-family: "Gotham" !important; font-weight: $weight;

@if $weight==regular {
    @if $shadow {
        text-shadow: 1px 1px 1px #aaaa;
    }
}

@if $weight==bold {
    @if $shadow {
        text-shadow: 1px 2px 4px #aaaa;
    }
}

@if $size {
    font-size: $size !important;
}

@if $align {
    text-align: $align !important;
}

} //... /:root[mode=ios] .gotham, :root[mode=md] .gotham{ --ion-font-family: 'Gotham' !important; font-family: 'Gotham' !important; }/ }

.subtitulo { @include font(normal, 3.5vw, false, center); margin: auto !important; }

ion-card-title, h1 { top: -10px; @include font(bold, 9vw, true); color: var(--ion-color-primary); }

- Ionic mandatory theming `variables.scss`

```sass
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/

:root {
  // --ion-font-family: "GothamMedium", "Roboto";
  // font-family: var(--ion-font-family) !important;

  --ion-font-family:  'Gotham' !important;
  font-family:  'Gotham' !important;

//... other non-related theming variables
}

• Ionic-suggested fonts.scss (i was going to deprecate it if the globals.scss code block functioned correctly, or the inverse). I do use mixins to make styling faster.

@font-face {
    font-family: "Gotham";  
    src: local('GothamMedium'), local('GothamMedium'), 
      url('../assets/GothamMedium.eot') format('embedded-opentype'),
      url('../assets/GothamMedium.woff2') format('woff2'),
      url('../assets/GothamMedium.woff') format('woff'),
      url('../assets/GothamMedium.ttf') format('truetype'),
      url('../assets/GothamMedium.svg#GothamMedium') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: "Gotham";
    src: local('GothamBold'), local('GothamBold'),
      url('../assets/GothamBold.eot') format('embedded-opentype'),
      url('../assets/GothamBold.woff2') format('woff2'),
      url('../assets/GothamBold.woff') format('woff'),
      url('../assets/GothamBold.ttf') format('truetype'),
      url('../assets/GothamBold.svg#GothamBold') format('svg');
    font-weight: bold;
    font-style: normal;
  }

@mixin font($weight, $size: false, $shadow: false, $align: false) { 
    font-family: "Gotham" !important;
    font-weight: $weight;

    @if $weight==regular {
        @if $shadow {
            text-shadow: 1px 1px 1px #aaaa;
        }
    }

    @if $weight==bold {
        @if $shadow {
            text-shadow: 1px 2px 4px #aaaa;
        }
    }

    @if $size {
        font-size: $size !important;
    }

    @if $align {
        text-align: $align !important;
    }

}

• angular.json

  {
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
  "app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "www",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "src/tsconfig.app.json",
          "assets": [
            {
              "glob": "**/*",
              "input": "src/assets/",
              "output": "assets/"
            },
            {
              "glob": "**/*.woff2",
              "input": "src/assets/",
              "output": "assets/"
            },
            {
              "glob": "**/*.svg",
              "input": "node_modules/ionicons/dist/ionicons/svg",
              "output": "./svg"
            },
            {
              "glob": "**/*.svg",
              "input": "node_modules/ionicons/dist/ionicons/svg",
              "output": "./svg"
            }
          ],
          "styles": [              
            {
              "input": "src/theme/fonts.scss"
            },
            {
              "input": "src/theme/variables.scss"
            },
            {
              "input": "src/global.scss"
            },
  //...

• package.json

{
  "name": "app",
  "version": "0.1.0",
  "author": "",
  "homepage": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "android:dev": "ionic cordova run android --external --debug",
    "android:prod": "ionic cordova run android -l --ssl --external --prod",
    "ios:dev": "ionic cordova run ios --prod",
    "ios:prod": "ionic cordova run ios -l --ssl --external --prod",
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^10.1.5",
    "@angular/core": "^10.1.5",
    "@angular/forms": "^10.1.5",
    "@angular/platform-browser": "^10.1.5",
    "@angular/platform-browser-dynamic": "^10.1.5",
    "@angular/router": "^10.1.5",
    "@ionic-native/bluetooth-serial": "^5.28.0",
    "@ionic-native/core": "5.22.0",
    "@ionic-native/device": "^5.28.0",
    "@ionic-native/diagnostic": "^5.28.0",
    "@ionic-native/firebase-x": "^5.26.0",
    "@ionic-native/in-app-browser": "^5.26.0",
    "@ionic-native/native-storage": "^5.26.0",
    "@ionic-native/splash-screen": "5.22.0",
    "@ionic-native/status-bar": "^5.22.0",
    "@ionic/angular": "^5.0.4",
    "@ionic/storage": "^2.2.0",
    "@keyframes/core": "^2.0.10",
    "@teamhive/lottie-player": "^1.0.0",
    "animate.css": "^3.7.2",
    "cordova": "^10.0.0",
    "cordova-android-firebase-gradle-release": "^4.0.0",
    "cordova-plugin-bluetooth-serial": "^0.4.7",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-enable-multidex": "^0.2.0",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "core-js": "^3.6.4",
    "firebase": "^7.14.5",
    "howler": "^2.1.3",
    "keyframes": "^2.3.0",
    "lodash": "^4.17.19",
    "native-run": "^1.0.0",
    "ng-payment-card": "0.0.8",
    "npm-check-updates": "^4.0.4",
    "rxjs": "^6.5.4",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.900.5",
    "@angular-devkit/build-angular": "^0.1001.6",
    "@angular-devkit/core": "^10.1.6",
    "@angular-devkit/schematics": "^10.1.6",
    "@angular/cli": "^10.1.6",
    "@angular/compiler": "^10.1.5",
    "@angular/compiler-cli": "^10.1.5",
    "@angular/language-service": "^10.1.5",
    "@ionic/angular-toolkit": "^2.2.0",
    "@ionic/lab": "^3.1.6",
    "@types/jasmine": "^3.5.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/lodash": "^4.14.149",
    "@types/node": "^13.7.7",
    "codelyzer": "^5.2.1",
    "cordova-android": "^9.0.0",
    "cordova-ios": "^6.1.1",
    "cordova-plugin-androidx": "^2.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-firebasex": "10.2.0-cli",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "ts-node": "^8.6.2",
    "tslint": "~6.1.0",
    "typescript": "^4.0.3"
  },
  "description": "Crucijuegos Salas App",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-nativestorage": {},
      "cordova-android-firebase-gradle-release": {
        "FIREBASE-CORE": "17.0.0",
        "FIREBASE-ADS": "18.0.0",
        "FIREBASE-ANALYTICS": "17.0.0",
        "FIREBASE-APPINDEXING": "19.0.0",
        "FIREBASE-AUTH": "18.0.0",
        "FIREBASE-FIRESTORE": "20.0.0",
        "FIREBASE-FUNCTIONS": "18.0.0",
        "FIREBASE-MESSAGING": "19.0.0",
        "FIREBASE-STORAGE": "18.0.0",
        "FIREBASE-CRASH": "16.2.1",
        "CRASHLYTICS": "2.10.1",
        "FIREBASE-DYNAMIC-LINKS": "18.0.0",
        "FIREBASE-INVITES": "17.0.0",
        "FIREBASE-INAPPMESSAGING": "18.0.1",
        "FIREBASE-INAPPMESSAGING-DISPLAY": "18.0.1",
        "FIREBASE-ML-VISION": "21.0.0",
        "FIREBASE-ML-VISION-IMAGE-LABEL-MODEL": "18.0.0",
        "FIREBASE-ML-VISION-FACE-MODEL": "18.0.0",
        "FIREBASE-ML-VISION-OBJECT-DETECTION-MODEL": "17.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE": "20.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE-LANGUAGE-ID-MODEL": "20.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE-TRANSLATE-MODEL": "20.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE-SMART-REPLY-MODEL": "20.0.0",
        "FIREBASE-ML-MODEL-INTERPRETER": "20.0.0",
        "FIREBASE-ML-VISION-AUTOML": "17.0.0",
        "FIREBASE-PERF": "18.0.0",
        "FIREBASE-DATABASE": "18.0.0",
        "FIREBASE-CONFIG": "18.0.0"
      },
      "cordova-plugin-enable-multidex": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-ble-central": {
        "BLUETOOTH_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-bluetooth-serial": {},
      "cordova-plugin-firebasex": {
        "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
        "FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
        "FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true"
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

Ionic info:

• Mac development station

  
  74-80-245-21:cruci-app user922954$ ionic info

Ionic:

Ionic CLI : 6.11.12 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.3.3 @angular-devkit/build-angular : 0.901.12 @angular-devkit/schematics : 9.1.12 @angular/cli : 9.1.12 @ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 10.0.0 Cordova Platforms : ios 6.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 15 other plugins)

Utility:

cordova-res : 0.15.1 native-run (update available: 1.2.2) : 1.1.0

System:

ios-sim : 8.0.2 NodeJS : v12.16.2 (/usr/local/bin/node) npm : 6.14.4 OS : macOS Catalina Xcode : Xcode 12.0.1 Build version 12A7300

- Linux development station (for reference, works perfectly)
```bash
⟩ ionic info

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1001.6
   @angular-devkit/schematics    : 10.1.6
   @angular/cli                  : 10.1.6
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.2.2) : 1.1.0

System:

   Android SDK Tools : 26.1.1 (/home/praetors/Android/Sdk/)
   NodeJS            : v12.13.0 (/home/praetors/.nvm/versions/node/v12.13.0/bin/node)
   npm               : 6.12.0
   OS                : Linux 4.19

StackOverflow Question

[ionitron-bot[bot]]

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our forum or our slack channel for questions about the framework.

Thank you for using Ionic!