Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49083
↧

Ionic Angular custom fonts not begin loaded

October 19, 2020, 2:42 pm
$
0
0

Bug Report

Ionic version:
4.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 
// 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)
⟩ 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

2 posts - 2 participants

Read full topic

↧
Search
Viewing all articles
Browse latest Browse all 49083

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

February 16, 2017, 4:24 pm

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

January 5, 2014, 10:34 pm

Ominde Commission Report and Recommendations – Ominde Report of 1964

March 16, 2015, 5:14 am

Bureau of Internal Revenue: Regional Offices (Directory)

January 9, 2014, 11:06 pm

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

March 26, 2017, 11:23 pm

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

October 17, 2016, 7:20 am

Mp3 Download: Mdu - Kunjenjenjena

December 7, 2017, 8:16 am

How the kill the job , when DTP request running for long hours.

July 26, 2013, 2:41 am

Microsoft Intune から展開しているアプリのアップデートについて

October 17, 2016, 4:11 am

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

September 1, 2017, 10:00 pm

Car crash in Dunton Bassett leaves driver in critical condition

October 7, 2014, 7:51 am

Macky 2, Two Others In Road Accident

March 29, 2015, 5:34 am

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

May 14, 2015, 11:27 pm

Detroit mafia: D’Anna Brothers agree to plea deal

April 21, 2016, 6:56 am

Delivery block field greyed out using VA02

January 26, 2016, 2:52 pm

Muloraki Au

June 22, 2016, 1:44 am

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

October 12, 2017, 2:23 pm

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

February 9, 2018, 4:56 am

FIAT 500 B0111 B0112

July 5, 2018, 10:31 am
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>