3

while developing an ionic app I used some icons and images.The issue is now my app is not displaying icons properly .got these errors in the console

Failed to load resource: the server responded with a status of 404 (Not Found)----ionicons.woff2

these error exists for 'roboto-medium.ttf','roboto-regular.ttf','ionicons.woff','ionicons.woff','roboto-regular.woff '

 localhost:portnumber/build/assets/fonts/roboto-light.ttf 404 (Not Found)

I didn't even use any of the fonts in my app,but why is this affecting in displaying icons

  • Cordova CLI: 6.5.0
  • Ionic Framework Version: 2.0.0
  • Ionic CLI Version: 2.2.1
  • Ionic App Lib Version: 2.2.0
  • Ionic App Scripts Version: 1.0.0
  • ios-deploy version: Not installed
  • ios-sim version: Not installed
  • OS: Linux 3.13
  • Node Version: v7.7.2
  • Xcode version: Not installed

i have cross checked with my previous copy of the same app,found that the path in main.css file for @font-face is changed to assets/fonts/ionicons.woff2 from ../assets/fonts .I think this is the root cause ,but i tried to change it,after runing the app the changes were not applied.how to resolve this issue.

Lisa
  • 655
  • 3
  • 10
  • 34
  • Are you using your own icons and images.. or are you using the ionicons..? – Raja Yogan Apr 05 '17 at 14:20
  • am using ionicons – Lisa Apr 05 '17 at 14:26
  • Oh.. Open www folder in your project and navigate to assets -> fonts.. In that check if all the 4 files in the error message are present. Then try building the project again and run it.. (If the error persists, please post the version of cli and version of ionic that you are currently using) – Raja Yogan Apr 05 '17 at 14:31
  • yeah all those files are there in www/assets/fonts. – Lisa Apr 05 '17 at 14:40

4 Answers4

0

after a lot of struggling ,i found the solution .That is to make changes in variable.scss file in "theme" folder .chaning the path of a variable $font-path sloved all the issue.$font-path: "../assets/fonts";

Lisa
  • 655
  • 3
  • 10
  • 34
  • Hi. I already had the path like `$font-path: "../assets/fonts"` but the fonts are not being installed. My problem is with the `Roboto` fonts. They are not being added inside `assets/fonts` Any ideas? – Ionut Necula Aug 24 '17 at 14:59
0

There was same issue for me.

due to some modification these files were missed, Ii got resolved by-

  1. $ npm install
  2. server re-start ionic serve --lab

Working great for me.

Hope it will work for you too.

S.Yadav
  • 4,273
  • 3
  • 37
  • 44
0

If you don't need the Roboto fonts, just remove this line @import "roboto" in variables.scss

A P
  • 2,131
  • 2
  • 24
  • 36
Im.a.Outman
  • 13
  • 2
0

In my case the following was the fix to the error: Add this mime to your web.config:

<configuration> <system.webServer> <staticContent> ...
<!--
    https://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts
  -->   
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
Meryan
  • 1,285
  • 12
  • 25