Bug Report
Hey everyone 馃憢 looking forward to getting some help on this one !
Capacitor Version
馃拪 Capacitor Doctor 馃拪
Latest Dependencies:
@capacitor/cli: 3.2.5
@capacitor/core: 3.2.5
@capacitor/android: 3.2.5
@capacitor/ios: 3.2.5
Installed Dependencies:
@capacitor/cli: 3.0.1
@capacitor/core: 3.0.1
@capacitor/android: 3.0.1
@capacitor/ios: 3.0.1
[success] iOS looking great! 馃憣
[success] Android looking great! 馃憣
Platforms
Current Behavior
I am using Capacitor with NextJS 10 + Tailwind 2 and I'm trying to add custom fonts (that are not open source) with files I have locally.
When running the server locally and run capacitor apps with live reload everything goes smoothly and I can see my custom fonts where I need them to be. But whenever I create a build (that's not with live reload) and run it the custom fonts are not displayed. Here are 2 screenshots with and without the fonts 猬囷笍
Funnily enough, I'm trying to add 2 custom fonts (one for the body and one for display titles etc). And the only that's failing is the display one 馃し The setups are exactly the same ofc.
Expected Behavior
I don't understand why things work locally and not when building the app. I was expecting Capacitor to take care of this since the web version (NextJS only) works very fine and one of the fonts is correctly used.
Code Reproduction
I've checked that the font files are copied in both apps source code
- for android:
android/app/src/main/assets/fonts/
- for ios:
ios/App/App/public/fonts/
I've tried to add fonts preloading as well in the <Head> of my document (source) using something like
<link
rel="preload"
href="/fonts/HKGrotestWide/HKGrotestWide-SemiBold.woff2"
as="font"
type="font/woff2"
crossOrigin=""
/>I've double checked the @font-face declarations and paths
@font-face {
font-family: "HK Grotesk Wide";
font-weight: 600; // Semi-bold
font-display: swap;
src: url("/fonts/HKGroteskWide/HKGroteskWide-SemiBold.woff2") format("woff2");Everything works when I run NODE_ENV=development npx cap sync but failed when running NODE_ENV=beta development npx cap sync
Here's the capacitor.config.ts for reference there might be some clues here
import { CapacitorConfig } from '@capacitor/cli';
// define NODE_ENV in cap commands
// NODE_ENV=[envName] npx cap [command]
console.log("NODE_ENV=",process.env.NODE_ENV)
let config : CapacitorConfig
const baseConfig: CapacitorConfig = {
appId: 'com.myapp.app',
appName: 'App',
webDir: 'out',
bundledWebRuntime: false,
"plugins": {
"CapacitorFirebaseAuth": {
"providers": ["google.com"],
"languageCode": "fr",
"nativeAuth": true,
"permissions": {
"google": ["profile"]
}
}
},
};
if(process.env.NODE_ENV==='development'){
baseConfig.server = {
"url": "http://192.168.1.45:3000",
"cleartext": true
}
}
switch (process.env.NODE_ENV)聽{
// FIXME: why can't i call node_env beta?
// @ts-ignore
case 'beta':
case 'development':
config = {
...baseConfig,
ios : {
contentInset: "automatic",
scheme: "App beta"
},
android: {
// FIXME: open PR @Capacitor for type issue
//@ts-ignore
flavor:"beta"
}
}
break;
default:
config = {
...baseConfig,
ios : {
contentInset: "automatic",
scheme: "App"
},
android: {
//@ts-ignore
flavor: "production"
}
}
break;
}
console.log(config)
export default config;Other Technical Details
npm --version output:
6.11.3
node --version output:
v16.10.0
pod --version output (iOS issues only):
1.10.1
Additional Context
I've been working on adding fonts for 4 days so any help would be greatly appreciated ! Thanks a lot 馃檱
Bug Report
Hey everyone 馃憢 looking forward to getting some help on this one !
Capacitor Version
Platforms
Current Behavior
I am using Capacitor with NextJS 10 + Tailwind 2 and I'm trying to add custom fonts (that are not open source) with files I have locally.
When running the server locally and run capacitor apps with live reload everything goes smoothly and I can see my custom fonts where I need them to be. But whenever I create a build (that's not with live reload) and run it the custom fonts are not displayed. Here are 2 screenshots with and without the fonts 猬囷笍
Funnily enough, I'm trying to add 2 custom fonts (one for the body and one for display titles etc). And the only that's failing is the display one 馃し The setups are exactly the same ofc.
Expected Behavior
I don't understand why things work locally and not when building the app. I was expecting Capacitor to take care of this since the web version (NextJS only) works very fine and one of the fonts is correctly used.
Code Reproduction
I've checked that the font files are copied in both apps source code
android/app/src/main/assets/fonts/ios/App/App/public/fonts/I've tried to add fonts preloading as well in the
<Head>of my document (source) using something likeI've double checked the
@font-facedeclarations and pathsEverything works when I run
NODE_ENV=development npx cap syncbut failed when runningNODE_ENV=beta development npx cap syncHere's the
capacitor.config.tsfor reference there might be some clues hereOther Technical Details
npm --versionoutput:6.11.3
node --versionoutput:v16.10.0
pod --versionoutput (iOS issues only):1.10.1
Additional Context
I've been working on adding fonts for 4 days so any help would be greatly appreciated ! Thanks a lot 馃檱