PhoneGap build missing fonts

StuartProgramming Blog

I am making an application using Ionic Framework and PhoneGap build. Unfortunately, even though my fonts work properly during debugging in the browser, the deployed file is missing fonts and displays a fallback font instead. This took a long time to figure out because of the lack of documentation. The problem was that there was a resources folder “res” created when initializing the environment (not sure if PhoneGap, cordova or Ionic scripts are to blame here). During build, the res contents are not included unless they are specifically referenced in the config.xml file (like the splash screens and icons.)

Move your fonts into a subfolder of the css folder and then use the standard cross-platform font reference method like:

@font-face {
  font-family: "Ionicons";
  src: url("fonts/ionicons.eot");
  src: url("fonts/ionicons.eot") format("embedded-opentype"),
    url("fonts/ionicons.woff") format("woff"),
    url("fonts/ionicons.ttf") format("truetype"),
    url("fonts/ionicons.svg#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}
StuartPhoneGap build missing fonts