Tips for avoiding a ligature occurrence in a specific location

I am a fan of ligatures in general, as they improve readability. I want to implement them across all my HTML pages.

However, there is this one word Hanftierheft (which is German and a compound word made up of Hanf, Tier, and Heft). I specifically do not want a ligature for the letters "nfti", but I do want one for "eft".

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-variant-ligatures: normal;
  font-size: 50px;
}
Hanftierheft

Is there a way to instruct my browser to use ligatures by default, but exclude them in specific cases like this?

htmlcssutf-8ligature

Answer №1

Utilize the entity reference for the zero-width non-joiner character, and incorporate the word in your HTML code as Hanf‌tierheft.

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {
  font-family: 'Libre Baskerville', serif;
  font-variant-ligatures: normal;
  font-size: 50px;
}
<p>Hanf&zwnj;tierheft</p>

Answer №2

To prevent ligatures from appearing, you can utilize a span and apply the style font-variant-ligatures: none;:

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {
  font-family: 'Libre Baskerville', serif;
  font-variant-ligatures: normal;
}

p {
  font-size: 50px;
}

span {
  font-variant-ligatures: none;
}
<p>Han<span>fti</span>erheft</p>

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

Tips for effectively utilizing conditional comments

Is it possible to address all IE bugs by writing CSS in just one conditional block? <!--[if lt IE 9]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> If I use a single conditional comment for IE versions less th ...

htmlcssinternet-explorer

`Enhancing Navigation Links with Scroll-Activated Styling`

I'm attempting to recreate a visual effect that is similar to: Specifically, I am trying to achieve a style where the links in the navigation bar change color when the corresponding section is displayed, such as having the gallery link in the navbar ...

javascriptjquerycss

Mastering Kendo UI in Vue: The Ultimate Guide to Managing Child Checkboxes in TreeView

I am currently utilizing Telerik's Vue wrappers for Kendo UI. With the TreeView control, both the jQuery version and MVC wrappers have a feature that allows a property to automatically check child checkboxes when the parent checkbox is checked. ...

htmlkendo-uivue.js

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

cssreactjsstylingmaterial-ui

Looking for assistance with resizing and repositioning an image within a viewport?

The JSFiddle code can be found at this link - https://jsfiddle.net/pmi2018/smewua0k/211/ Javascript $('#rotate').click(function(e) { updateImage(90, 0) console.log("rotation"); }); $('#zoom-in').click(function() { updateImage(0 ...

javascripthtmljquerycss

Altering the height of cells in a table for HTML emails being sent to Gmail accounts

When attempting to send an HTML email from Outlook 2013 to Gmail, I have encountered a significant gap between the rows. Despite my efforts, I have been unable to adjust the row height. I am seeking advice on how to resolve this issue. Here is the code s ...

htmlcssgmailhtml-email

Flexbox Resizing Notification(?)

Recently, I've been utilizing flexbox in my layout design and it has been a game-changer. However, I am facing an issue that might be linked to my heavy use of AngularJS, particularly the ng-include feature. The specific problem arises when I incorpo ...

javascripthtmlangularjsflexbox

Website experiencing issues with moderating Facebook comments

I recently added a Facebook comments box to my website in the footer. Although it is visible, I am unable to moderate it. Furthermore, the comments are not showing up in the comments queue panel at https://developers.facebook.com/tools/comments. I am us ...

javascripthtmlangularjsfacebookfacebook-graph-api

Implementing a redirect and setting a background image dynamically in ASP.NET using code-behind

I have a section in my PHP template with a onclick event handler. My goal is to redirect users to another page when they click on this section. Here's what I've attempted: HTML: <section id="header" onclick="window.location.href='Anoth ...

c#javascriptasp.nethtml

What is the best way to prevent blank space when splitting a div into two parts?

Currently in the process of working on a school project that involves creating a website with an integrated database. The foundation for this project is an existing website from a previous assignment, created using PHP/HTML. The layout of my prior website ...

htmlcss

The journey of a JavaScript file within an iframe devoid of any src attribute

Consider this scenario: In a folder labeled /jscript, there are two files named my_js_file1.js and my_js_file2.js. I also have an /index.html page structured like this: <html> <head> <script type='text/javascript' sr ...

javascripthtmliframe

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

javascriptjquerycss

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

Utilizing Local Files in a Bootstrap Video Carousel

Currently working on a website for a school project and I am trying to incorporate a carousel of videos. After finding a bootstrap carousel template that played videos linked to a server, I attempted to switch it out with local video files without succes ...

htmlcssbootstrap-4

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

javascripthtmlcssscrollbar

Table with Typewriter Style CSS Animation

I came across an interesting typewriter effect implementation using CSS in an article on CSS Tricks I decided to play around with it and see if I could apply it to a hero image, which I found an example of on Codepen However, I noticed that the blinking ...

cssanimationhtml-table

Chic and perfectly aligned stripe button design

I need assistance with centering and styling the Stripe checkout button labeled "update card." Additionally, I want to adjust the appearance of the card number input field to be normal but readonly. How can I achieve this without relying on Bootstrap' ...

htmlcsstwitter-bootstrapstripe-payments

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

javascripthtmltwitter-bootstrapreactjsbootstrap-modal

Dealing with Sideways Overflow Using slideDown() and slideUp()

Attempting to use slideUp() and slideDown() for an animated reveal of page elements, I encountered difficulty when dealing with a relatively positioned icon placed outside the element. During these animations, overflow is set to hidden, resulting in my ico ...

javascriptjqueryhtmlcss

"Easily toggle the visibility of values in checkboxes and organize them into groups with the power of JavaScript

Hey there! I am currently working on a project that involves grouping checkboxes and hiding/unhiding their content based on user interaction. Essentially, when the page first loads, the "All CARS" checkbox will be checked by default. If I then check the "C ...

javascriptjqueryhtml