Turn off OpenType `ccmp` Glyph Composition using CSS

In my Electron app, I am utilizing the Lora font and have run into an issue where text like mysterious `accent` gets automatically converted to mysterious àccent due to OpenType glyph composition.

<p>mysterious `accent`</p>

This becomes:

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

I attempted to disable this feature using 

font-feature-settings: "ccmp" off
, but without success. The strange part is that this issue occurs within the Electron app, yet I cannot replicate it on platforms such as the Google Fonts page in Chrome.

Is there a correct way to deactivate the ccmp OpenType feature in Electron?

cssfontselectronopentype

Answer №1

After further investigation, it was discovered that the issue was related to a problem with the font, which has now been resolved in the most recent update.

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

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

phphtmlcsstextboxtags

Tips on setting and utilizing custom environment variables in a Vue Electron application

What is the best way to integrate custom environment variables into my Electron application? I need to securely store API keys and other sensitive information without hardcoding them directly into the code. My app is built with Vue and Electron. To tackle ...

vue.jselectronenvironment-variables

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing. The challenge I'm facing is that for certain rows, I want to apply a specific background color using ...

javascriptjquerycsshtml-table

jQuery accordion's visibility``onChange in jQuery accordion``

Currently, I am in the final stages of developing my custom Jquery accordion. However, I am facing a challenge with having it start in a closed position without explicitly using $(".wrap-faq li p").slideUp(); before the function, as it automatically slid ...

jquerycsshtmlfunctionaccordion

Utilizing a background image in the slick slider

<div id="largeCarousel" style="display:inline-block; float:right;"> <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;"> <div id="largeCarouselContent" style="position:absolute ...

htmlcssslick.js

What is the proper way to position elements within a <td> tag?

I am working with Products that have images of maximum size 100px. This means either the width is 100px and the height is less than 100px, or the height is 100px and the width is less than 100px. One side always measures 100px. My goal is to display the p ...

htmlcssalignmenthtml-table

Display HTML content within designated fixed-column sizes

Looking to divide the content of an HTML file into multiple fixed size columns, both in terms of height and width, then display it in a Webview. I attempted employing the CSS properties mentioned below, but couldn't get it to function as desired. -we ...

javascriptandroidhtmlcss

When hovering over an object in three.js, the cursor should change on mouseover

In my scene, I have added a sphere and plane geometry. Clicking on the plane geometry will open a linked website. Now, when hovering over the plane geometry, I want the mouse cursor to change to a hand pointer icon, and revert back to its original style ...

javascripthtmlcssthree.jshover

JavaScript function not functioning properly with variable input

I'm currently working on implementing two functions that will allow me to navigate through an array of image sources and display them in my image view: nextImage() and previousImage(). Everything seems to work fine when I hardcode the num variable, bu ...

javascripthtmlcssimagevariables

Child div set to 100% height within parent div with auto height

After scouring the internet for hours in search of an answer, I found myself reading articles like Floats 101 on alistapart and browsing through countless similar questions on stackoverflow. I have reached a point where I feel like I must ask my question b ...

csshtmlcss-float

Tips for styling text with JavaScript's writeText method

Is there a way to customize the text in the writeText tag using Javascript? I want to display the words Eyes and Blue on separate lines, with one of them in a larger font size than the other. How can I style them individually? <head> <script& ...

javascripthtmlcss

The Kadwa font's right arrow character appears overly broad

I am having an issue with the Google Font Kadwa in InDesign, specifically when using it to generate a right arrow (→). After loading the font onto my website, I noticed that the arrow appears to be too wide for my liking. @import url('https://fo ...

csswebfontstypographygoogle-fonts

Adjust the text selection feature to interpret neighboring elements as distinct entities

Typically, when selecting text in a browser, words are combined if they are separated by whitespace in the HTML. For example, <span/> <span/> will be treated as separate words, while <span/><span/> will be combined. However, I want ...

htmlcss

Unable to display a custom image as a check mark on a checkbox

I tried to add some custom CSS to style the images on my checkmark boxes. The goal was to display an image with a checkmark when clicked, but unfortunately, it's not working as expected during testing. For this task, I utilized CSS and HTML from a he ...

javascriptjqueryhtmlcsscheckbox

Tips for customizing the appearance of a checkbox made with AngularJS

I need to style the checkbox using CSS without modifying the HTML code provided due to company restrictions. Is there a way to customize the appearance of the checkbox purely through CSS? Below is the AngularJS code snippet: <label class="form-lbl n ...

htmlangularjscsscheckboxtwitter-bootstrap-3

Ways to align antd Card at the middle of the Col component in a React application

I'm trying to position a card in the center of the screen using the code below: import React from "react"; import "./index.css"; import { Card, Col } from "antd"; const App = () => ( <Col style={{height: '50 ...

javascripthtmlcssreactjsantd

How can the backgroundImage css in react admin <Login /> be replaced using Material-UI?

I have been refering to the following resources: Learn about customizing login page background in React-Admin: Explore themes customization in Material-UI: https://material-ui.com/customization/components/ Instead of using a preset background, I want to ...

javascriptcssreactjsmaterial-uireact-admin

Issue with transition duration not affecting bootstrap button functionality

I am attempting to incorporate a transition effect on specific bootstrap buttons. The issue lies with the height and width properties. They change instantly without taking into account the transition duration property. Keep in mind that all other propert ...

cssbootstrap-4css-transitions

The navigation bar and footer are not utilizing the entire width of the browser

Something seems off on the Safari browser, as there's still a gap in the right side of the navbar and footer. I've been using Bootstrap and steering clear of Javascript. Any ideas on how to fix this? Appreciate any help. Thanks! Here's the ...

htmlcssbootstrap-5

Adjust a CSS variable with a simple click

I have a challenge where I want to double the value of an element's property every time it is clicked, using CSS variables. Here's what I have tried: #circle_1 { width:50px; height:50px; width: var(--size_1, 50px); heig ...

javascriptcsscss-variables