iOS Font Display Issue in Ionic 2

I am currently in the process of developing an app using Ionic 2 and I want to incorporate a custom font called Quicksand.

Here is how my folder structure looks:

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

Within my app.scss file, I have included the following code to ensure the font is accessible across all 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;
}

By referencing it as font-family: Quicksand-Bold, I can use the font throughout the app.

This setup works without any issues on Android and on browsers, but there seems to be a problem with iOS.

Prior to this, I encountered a similar issue with:

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

This specific URL caused my iOS app to crash. To work around this, I had to create a div element with the image designated as the background and position it accordingly.

It appears that the same issue may be occurring here when specifying the path for 

url("../assets/fonts/Quicksand-Bold.ttf")
where iOS is unable to locate the specified path for some reason.

ioscssfontsionic2

Answer №1

While viCky's response didn't directly solve my problem, it did point me in the right direction.

In my initial question, I mentioned attempting to convert a .ttf file to woff2. However, iOS only supports otf and ttf fonts, so using a .woff2 format would cause font display issues. The correct format for a .ttf file is TrueType.

By changing the code snippet 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');

I was able to successfully resolve the issue and now have the desired fonts working in my iOS application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...

javascripthtmlcssbootstrap-4flexbox

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

javacssselenium-webdriver

Stack View with no distribution or filling

On my app, I have a specific view where I need the capability to add a variable number of custom subviews dynamically. The quantity of views may change while the app is running. Initially, I considered using a tableview, but setting up all the delegate me ...

iosswiftuitableviewuistackview

Adjust the background color of the dropdown when toggled

I want to add a background color to my dropdown menu when it's activated. In the demo, the dropdown content overlaps with the text behind it. Currently, I have a scrollspy feature that applies a background color to the nav bar and dropdown menu when s ...

javascripthtmlcssbootstrap-5nav

Tips for increasing the size of Material-ui Rating icons

I am currently utilizing npm to develop a widget. I aim to utilize the material-ui Rating component and have successfully integrated it. However, when I embed the widget on a webpage, the html font-size is set at 62.5%, causing the component to appear too ...

javascriptcssnode.jsmaterial-ui

Glitches of white light during loading screens on your Prestashop website

There's a strange occurrence on the website where it flashes white DURING (not just at the start) every time a page loads. Initially, the page seems to load smoothly and almost completely, but then there is a sudden flash before all elements are disp ...

htmlcssprestashop

Is the contact form confirmation message displaying too prominently?

I am currently troubleshooting two different forms on a website I'm developing, and I am unsure of the exact cause of the issue. Form 1: Form 2: When attempting to submit Form 1 without entering any information, an error message is displayed exactl ...

javascripthtmlcss

Table does not have appropriate rowspan and colspan attributes

I've created a table using bootstrap, but it's not displaying as intended. I used row-span and col-span to format the table, and while most rows are correct, some are not appearing on the page. To better illustrate the issue, I have included an ...

htmlcssbootstrap-4

Issue with CAEmitterLayer not displaying when the superlayer's -renderInContext: method is invoked

I have developed a drawing app that offers users the ability to incorporate particle effects into their creations. The main purpose of the app is to allow for customized drawings that can be saved to the Camera Roll or shared online. Recently, I came acro ...

ioscore-animationcalayercaemitterlayer

Creating perfectly spaced toast messages with CSS styling

I am trying to customize the alignment of my toast messages to the bottom left corner. Ideally, I want them to stack on top of each other with a small gap of 10px between each message, ensuring that they are all visible and readable. Currently, changing ...

htmlcss

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

htmlcssflexbox

Scrolling the page horizontally using AJAX

I am working on creating a website similar to France24.com. I envision a layout with navigation on the left and two arrows on each side for scrolling horizontally. When users click on the arrows or any of the navigation items, I want the related page to pr ...

cssajaxhtmlpreload

Tips for ensuring that each flexbox element fills up a single line

My goal is to have each child element fill up one line by itself. See this screenshot for reference: https://i.stack.imgur.com/F40Xm.png Below is the code I am currently using: main { display: flex; justify-content: space-around; align-items: ...

htmlcssflexbox

Using JavaScript, learn how to dynamically add a `<select class="form-control">` in Bootstrap

Currently delving into the realms of Bootstrap and jQuery, these are both new territories for me. I am looking to use JavaScript to dynamically create the <select class="form-control"> tag. In my JavaScript code snippet, I have this: var response ...

javascriptcssselect

Moving the center div to the top of the content for mobile screens

Would like some help in positioning the col-md-6 div to the top of my website on mobile, causing both col-md-3 elements to stack on top of each other. <div class="row"> <div class="col-md-3"> <div class="box"> & ...

htmlcsstwitter-bootstrapbootstrap-4

Problem with Jquery fetching data from specified div not resolved

Here is a working example: var myvar; $.get('formElements.html', function(data) { myvar = data; }); However, this code does not work as intended: var myvar; $.get('formElements.html .className', function(data) { myvar = data; } ...

javascriptjqueryhtmlcss

What is preventing npm sass from compiling properly?

https://i.stack.imgur.com/ekbNW.png While making edits to my code, I've noticed that the sass-compiler isn't indicating any errors (red lines) or successful compilations (green lines). Can someone help me identify where I might be going wrong? ...

htmlcssnpmsass

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

htmlcsstwitter-bootstrapgrid-layout

Trouble arises with kids when trying to adjust the display to block mode

I need to set all the div elements inside the div with id "editor" to display as block. However, when I change the display property of the div with id "editor", only that specific div's display is affected, while everything else inside the div becomes ...

javascriptjquerycss

Does the use of CSS positioning impact the performance of browser rendering?

Given two DIVs, A and B, where A contains B, and the following CSS styles: A { margin-left: -2000px; } B { margin-left: 2000px; } With these CSS styles applied, the position of B remains unchanged compared to its original position without any CSS. I am c ...

cssperformancerendering