Ionic Angular custom fonts not begin loaded - css

Question

The Problem
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).
Expected Behavior
Current Behavior
No custom font dependent component is shown except when commenting its font styling (second image).
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
// 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;
}
}
Configuration
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"
]
}
}
Env
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)
⟩ 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