iOS emphasizes special characters by printing them in bold

Some parts of the website I am managing are showing German umlauts in bold (as seen in the screenshot). The font style being used is 

font-family: Source Sans Pro, Arial, sans-serif;
with font-weight: 300. This font is sourced from Google Fonts.

When I change the font weight to 400 or higher, or switch to a different font, the issue is resolved. What's strange is that this only seems to be happening in the lower paragraph. I have tried disabling all font-related styles in Safari Web Inspector for both paragraphs but without any luck.

So far, it appears that this issue is specific to Safari and Chrome on iOS, as Chrome on macOS and Android display the text correctly.

Affected webpage:

https://i.sstatic.net/xDzXy.png

ioscssfonts

Answer №1

We discovered the resolution. The diacritics were in fact distinct ASCII characters compared to the usual ones (for example, 097 204 136 rather than 195 164 for ä). It is likely they originated from a period when the site was employing an obsolete LaTeX extension. Substituting the characters with standard diacritics resolved the issue.

Answer №2

I had success with this solution:

let newAttributedString = NSMutableAttributedString(attributedString: stringSrc.html2AttributedString!)

newAttributedString.addAttribute(NSAttributedString.Key.font, value: UIFont(name: "HelveticaNeue-Medium", size: 16.0)!, range: NSMakeRange(0, stringSrc.length))

label.attributedText = newAttributedString

You can find font names listed here: https://github.com/lionhylra/iOS-UIFont-Names

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

Achieving consistent width for flex items in each row

Can I ensure that all flex items have the same width? Currently, my code looks like this: .video-container { background-color: blue; min-height: 90vh; display: flex; flex-wrap: wrap; } .video { flex: 1 0 25%; } <div class="video-contain ...

htmlcssflexbox

In Swift 5, accessing MKMapView within a UITableViewCell poses usability challenges for users

My attempt to embed a MKMapView in a UITableViewCell seems successful at first glance. However, I've run into some issues where the map is not interactive - it can't be zoomed, scrolled, or tapped. Even the legal link provided by Apple is unrespo ...

iosswiftuitableviewmkmapview

Implementing a distinct approach to adding margins to div boxes using

Hello, I've been experimenting with the developer tools in Google Chrome to add margins to my navigation bar. The goal is to create gaps between the boxes. Any assistance would be greatly appreciated! http://jsfiddle.net/3jp1d0fe/8/ CSS div.contain ...

css

Attempting to achieve a carousel animation using jQuery

Upon loading the page, only one character out of four is displayed. Two arrows are provided - one on the left and one on the right. Clicking on the left arrow causes the current character to fade out and the previous character to fade in. Clicking on the r ...

javascriptjqueryhtmlcss

Utilizing Jquery to create a carousel with looping functionality for flowing text

I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon ...

javascriptjquerycssasp.net-mvc-4bootstrap-4

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

My aim is to determine whether or not I should use an image based on its dimensions. To achieve this, I came across a function on stack overflow that can retrieve the dimensions of an image just by using its URL. Here is the code snippet they provided: f ...

javascriptcssreactjsimagematerial-ui

How can I eliminate the empty spaces surrounding an image?

How can I remove the extra space around an image that is placed inside a bootstrap column? On the desktop version, I was able to solve the issue by setting -1rem margins on the left and right. I tried adjusting the body margin and padding to 0, as well as ...

htmlcssreactjsmobilebootstrap-4

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Is there a way to store a reference of an HTML tag for future use? For instance, if I click on a div and save a pointer to that div in JavaScript, is it possible to serialize this pointer and then de-serialize it to use in another part of the web applicat ...

javascripthtmlcssdomserialization

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

htmlcss

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

jquerycsskeyvaluepair

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

javascripthtmlcssreactjs

The ACAccountStore is failing to fetch the Facebook account for a specific Custom SLRequest

As of now, I am in the process of developing an application that makes use of the latest iOS 6 Social framework to access a Facebook account stored on iOS devices. The purpose is to create a custom SLRequest that will allow users to post status updates and ...

iosfacebookfacebook-graph-apiios6

Repeated information displayed in modal pop-ups

HTML <a class="btn" data-popup-open="popup-1" href="#">More Details</a> <div class="popup" data-popup="popup-1"> <div class="popup-inner"> <h2>Unbelievable! Check this Out! (Popup #1)</h2> ...

javascriptjqueryhtmlcss

How to apply dynamic styling to a MatHeaderCell using NgStyle?

My goal is to dynamically style a MatHeaderCell instance using the following code: [ngStyle]="styleHeaderCell(c)" Check out my demo here. After examining, I noticed that: styleHeaderCell(c) It receives the column and returns an object, however ...

cssangulartypescriptangular-materialng-style

Having difficulty disassociating the radio button from the label

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;"> <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p> <img *ngIf="isImage[i]" [src]="a.image" ...

htmlcssangular

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

javascriptjqueryhtmlcssfonts

issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

htmlcssfirefoxflexboxcross-browser

Leveraging a Keyframes Definition from an External Source

Font Awesome has a special spin animation for elements that have the class fa-spin. Taking a closer look at the CSS code, you can see that the spinning effect is achieved through keyframes under the same name, fa-spin. Instead of creating a new animation ...

csswebkit-animation

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

phphtmlmysqlcss

Is it possible for me to create a Pomodoro clock similar to this one?

Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...

javascriptjqueryhtmlcss