Trouble Viewing Fonts on Mobile Devices like iPhones

I am experiencing a frustrating issue on my website. While using Agency FB and Calibri fonts, they appear correctly on all desktop browsers. However, when accessed from my iPhone, a different standard font is displayed instead.

Both the logo and text within a vector I created in XD use the Agency FB font. Additionally, various weights and styles of Calibri are used for the body of the website. The problem arises when the fonts are replaced for the logo and vector image, causing a disruption in the layout due to the mismatched typography.

Despite including font-face in my CSS stylesheet, the issue persists. Here is the code snippet for font-face:

@font-face {
    font-family: 'Calibri Light';
    src: url('fonts/Calibri-Light.eot');
    ...
}

...

I have attempted to use .tff files specifically for iPhone/Safari compatibility, but this solution has not resolved the problem. Any advice or suggestions would be greatly appreciated. Thank you.

htmlcssiphonemobilebrowser

Answer №1

Experiment with a different font-family designation such as:

@font-face {
    font-family: 'FuturaLight';
    src: url('fonts/Futura-Light.eot');
    src: url('fonts/Futura-Light.eot') format('embedded-opentype'),
        url('fonts/Futura-Light.woff2') format('woff2'),
        url('fonts/Futura-Light.woff') format('woff'),
        url('fonts/Futura-Light.ttf') format('truetype'),
        url('fonts/Futura-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaLightItalic';
    src: url('fonts/Futura-LightItalic.eot');
    src: url('fonts/Futura-LightItalic.eot') format('embedded-opentype'),
        url('fonts/Futura-LightItalic.woff2') format('woff2'),
        url('fonts/Futura-LightItalic.woff') format('woff'),
        url('fonts/Futura-LightItalic.ttf') format('truetype'),
        url('fonts/Futura-LightItalic.svg') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Neue Reg';
    src: url('fonts/HelveticaNeue-Reg.eot');
    src: url('fonts/HelveticaNeue-Reg.eot') format('embedded-opentype'),
        url('fonts/HelveticaNeue-Reg.woff2') format('woff2'),
        url('fonts/HelveticaNeue-Reg.woff') format('woff'),
        url('fonts/HelveticaNeue-Reg.ttf') format('truetype'),
        url('fonts/HelveticaNeue-Reg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBold';
    src: url('fonts/Futura-Bold.eot');
    src: url('fonts/Futura-Bold.eot') format('embedded-opentype'),
        url('fonts/Futura-Bold.woff2') format('woff2'),
        url('fonts/Futura-Bold.woff') format('woff'),
        url('fonts/Futura-Bold.ttf') format('truetype'),
        url('fonts/Futura-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura.eot');
    src: url('fonts/Futurae.eot') format('embedded-opentype'),
        url('fonts/Futura.woff2') format('woff2'),
        url('fonts/Futura.woff') format('woff'),
        url('fonts/Futura.ttf') format('truetype'),
        url('fonts/Futura.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaItalic';
    src: url('fonts/Futura-Italic.eot');
    src: url('fonts/Futura-Italic.eot') format('embedded-opentype'),
        url('fonts/Futura-Italic.woff2') format('woff2'),
        url('fonts/Futura-Italic.woff') format('woff'),
        url('fonts/Futura-Italic.ttf') format('truetype'),
        url('fonts/Futura-Italic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Neue Bold';
    src: url('fonts/HelveticaNeue-Bold.eot');
    src: url('fonts/HelveticaNeue-Bold.eot') format('embedded-opentype'),
        url('fonts/HelveticaNeue-Bold.woff2') format('woff2'),
        url('fonts/HelveticaNeue-Bold.woff') format('woff'),
        url('fonts/HelveticaNeue-Bold.ttf') format('truetype'),
        url('fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

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

Assigning arbitrary hidden form data from dropdown selection

Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...

javascripthtml

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

javascripthtml

Obtain the dropdown menu links for every row in a table using Python3 along with Selenium

Seeking assistance as a beginner in Python, I am attempting to automate the downloading process of old newspaper archives from a specific website () using the script provided below. Despite my efforts, I have encountered difficulty in getting the script t ...

htmlpython-3.xseleniumpdf

Utilize Python and Selenium to post a comment on Instagram

Having some trouble with submitting comments on Instagram using Python and Selenium. The comment box on the Instagram web page has the following structure: <textarea aria-label="Añade un comentario..." placeholder="Añade un comentario..." class="Ypff ...

pythonhtmlseleniuminstagram

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is an element in a hidden display still using memory when the page is loaded? It's convenient to have many elements on a page, but if 99 elements are hidden and only 1 is displayed, does that impact the loading of the page? I'm curious if the pa ...

javascriptcss

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

Unable to remove the initial item from my shopping cart

Currently working on my computing science assignment and decided to create an online store. I followed a tutorial to implement the shopping cart functionality, but I'm facing an issue. I can delete every item in the cart except for the first one that ...

phphtmlmysqliproject

Clicking the set button in Jquery mobile datebox resets the time

I am experimenting with the jquery mobile datebox (courtesy of Jtsage) to select time and date. Unfortunately, every time I reset the time by clicking the set button, I am unable to retrieve the correct time. Below are my code snippets: $.extend($.jtsag ...

javascriptjqueryhtmljquery-mobiledatebox

Tips for automatically filling out a div class form:

I currently have an Autoresponder email form featured on my webpage. Here is a snippet of the code for the section where customers enter their email: <div id = "af-form-45" class = "af-form" > <div id = "af-body-45" class = "af-body af-standa ...

javascriptjqueryclasshtml

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

javascriptjquerycssjquery-uijquery-effects

Main Article Holder containing Image overlaid with Post Details

I'm struggling to achieve something seemingly simple but can't quite get it to work. My goal is to display article previews on my website in a tiled format. For example, the tiles would have a fixed height and width, say 300px by 300px. I&apos ...

htmlcss

Explore lengthy content within Angular 2 programming

I have a lengthy document consisting of 40000 words that I want to showcase in a visually appealing way, similar to HTML. I aim to include headers, paragraphs, and bold formatting for better readability. Currently, I am developing an Angular application. D ...

htmlangulartext

When utilizing a JQuery .animate function to transition a div from 0px to 450px in height, an unintended margin is produced during the process

I have been attempting to implement a collapsible footer using JQuery. While I have successfully integrated all the animation functions, there seems to be an issue with the animate function affecting the div (id=draw) by creating an unseen margin beneath i ...

jquerycssjquery-animate

The .remove() method is ineffective when used within an Ajax success function

I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...

javascriptjquerycsshtml

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Exploring and Modifying CSS Styles in Element Properties

Struggling to remove a 50px gap on my website. It's built on Joomla 1.5 and the white space is highlighted in orange below. When I inspect element using Chrome, it shows a margin-bottom: 50px but doesn't specify the location. Any tips on how to ...

htmlcss

choosing from dropdown menu items

Learn HTML <table> <tr> <td>ENTER PRINCIPLE AMOUNT</td> <td><input type="text" name="principle" size="7"></td> </tr> <tr> <td>ENTER RATE OF INTEREST</td> <td><input type="text" na ...

javascriptjqueryhtmldrop-down-menu

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Struggling to display a function's output on a separate web page within a flask application

After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...

pythonhtmlsqliteflask

The <p> element nested inside a <div> element with font-weight styling

I'm struggling to make a large font size and weight fit into a div tag while aligning it vertically at the bottom. Can anyone help me with this issue? div { border:1px solid black; height:100px; } table { border:1px sol ...

htmlcssfont-size