CODEWITHSUNDEEP
ioscssfontsionic2
Ivar Reukers
Ivar Reukers

Reputation: 7729

ionic 2 - Font not showing on iOS

I'm trying to create an app (ionic 2) with a custom font, Quicksand.

My folder structure looks like this:

src
|
|-app
|   |
|   -app
|   |   |
|   |   -app.scss
|   |
|   -pages
|   |
|   -assets
|   |     |
|   |     -img
|   |     |
|   |     -fonts
|   |     |    |
|   |     |    -Quicksand-Bold.ttf

In my app.scss I have the following code to make the font available in all my pages:

@font-face {
    font-family: 'Quicksand-Bold';
    font-style: normal;
    font-weight: 300;
    src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Quicksand-Bold';
    font-style: normal;
    font-weight: 300;
    src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Then I can reference it anywhere using font-family: Quicksand-Bold.

This works perfectly fine on Android and in the browser, but it fails to load on iOS.

I have already had a problem using:

background: url('../assets/img/background.jpg')

which caused my ios app to crash. The workaround I used for this was create a div with the image and just position it as the background image.

I have a feeling that the same thing is happening here, when I reference url("../assets/fonts/Quicksand-Bold.ttf") that for some reason iOS is not able to find the path specified.

Upvotes: 1

Views: 2580

Answers (1)

Ivar Reukers
Ivar Reukers

Reputation: 7729

Alright, viCky 's comment didn't answer my problem but did send me up the right path.

In my question, you can see that I reference a .ttf file and try to format it as woff2. But since only otf and ttf fonts are supported in iOS, using a .woff2 format will break the fonts. The correct format for a .ttf file is TrueType.

So changing to:

src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('truetype');

Instead of 

src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2');

Resolved my issue. Now I can use the fonts in my iOS app.

Upvotes: 5

Related Questions