The Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Question

The Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Currently, I am utilizing the PT Sans Narrow font in my project, which unfortunately only offers regular and bold styles. As a result, I require the browser to apply faux italics when needed. Strangely, this functionality is only working on non-webkit browsers at the moment. An example of the issue can be seen in this image:

This peculiar behavior seems to be connected specifically to this font, as other fonts are displaying correctly. (You can observe this by checking out this JSFiddle: http://jsfiddle.net/pEVj7/) The comparison font used in the JSFiddle was created with the same parameters from Font Squirrel.

The solution I'm looking for is a simple way to include italicized text using tags like the following, and have the browser substitute with faux-italics if necessary:

<i>My custom italic text</i>

P.S. While I acknowledge that faux-italics may not be an ideal substitute for real italics, in this case, they are still preferable to having no access to italics at all. Additionally, I cannot use Google Webfonts due to their subpar rendering in Chrome.

html css fonts font-face webfonts

Answer 1

Answer №1

It appears that the issue lies within the SVG format of the font. By excluding it, Chrome will utilize the WOFF format and apply a faux italic effect to the text.

To confirm this, I downloaded PT Sans Narrow from Google and used the FontSquirrel generator with default settings. Adding italic text to the sample HTML file generated positive results. However, when running the generator with the SVG option enabled, the outcome remained consistent, with Chrome utilizing the WOFF file. Removing other formats from the CSS file and only referencing the SVG file caused the text to appear upright, despite Chrome still identifying it as PT Sans Narrow in italic form.

Upon reviewing your jsfiddle, I noticed that both the SVG and WOFF files are being loaded, although displayed as text/html content, but recognized as font files. The reason behind this behavior remains unclear and might be related to the internal workings of jsfiddle.

Answer 2

It appears that the issue lies within the SVG format of the font. By excluding it, Chrome will utilize the WOFF format and apply a faux italic effect to the text.

To confirm this, I downloaded PT Sans Narrow from Google and used the FontSquirrel generator with default settings. Adding italic text to the sample HTML file generated positive results. However, when running the generator with the SVG option enabled, the outcome remained consistent, with Chrome utilizing the WOFF file. Removing other formats from the CSS file and only referencing the SVG file caused the text to appear upright, despite Chrome still identifying it as PT Sans Narrow in italic form.

Upon reviewing your jsfiddle, I noticed that both the SVG and WOFF files are being loaded, although displayed as text/html content, but recognized as font files. The reason behind this behavior remains unclear and might be related to the internal workings of jsfiddle.

Answer 3

Answer №2

After extensive research and experimentation, I have come up with a viable alternative solution. Although the reason why webkit browsers do not use faux-italics still eludes me, I managed to replicate faux-italics through a combination of CSS and jQuery. Here is the HTML code that I intend to apply this method to:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Fusce aliquam
mollis pulvinar. In tincidunt, libero vel auctor scelerisque, ligula erat
tempus neque, eu ultrices justo erat a risus.</i> Nulla facilisi. Praesent
porttitor magna sed ultricies lacinia.

Firstly, I need to enclose each word in a span with the class italic. The rationale behind this approach will be explained shortly. I employ the following jQuery script to accomplish this:

$(document).ready(function(){
    $("i").each(function(){
        $element = $(this);

        var words = $element.text().split(" ");
        $element.empty();

        $.each(words, function(i, v) {
            $element.append($("<span class='italic'>").text(v));
            $element.append(" ");
        });
    });

    $("em").each(function(){
        $element = $(this);

        var words = $element.text().split(" ");
        $element.empty();

        $.each(words, function(i, v) {
            $element.append($("<span class='italic'>").text(v));
            $element.append(" ");
        });
    });
});

Subsequently, by utilizing CSS3, I can slant the text by 10 degrees specifically for webkit browsers:

span.italic{
    display:inline-block;
    -webkit-transform:skewX(-10deg);
}

This brings me to the necessity of enclosing each word in its own span. In order for this technique to be effective, the display property must be set to inline-block; therefore, if the italicized phrase spans multiple lines, it may not wrap correctly within a paragraph unless each word has an individual span.

Drawbacks

One potential drawback of this method is that if webkit browsers eventually start supporting faux-italics, the text may appear excessively angled. Additionally, this approach only functions with  and  tags, excluding all other italicized content. Lastly, any images or additional formatting enclosed within the  tag are stripped away.

Answer 4

After extensive research and experimentation, I have come up with a viable alternative solution. Although the reason why webkit browsers do not use faux-italics still eludes me, I managed to replicate faux-italics through a combination of CSS and jQuery. Here is the HTML code that I intend to apply this method to:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Fusce aliquam
mollis pulvinar. In tincidunt, libero vel auctor scelerisque, ligula erat
tempus neque, eu ultrices justo erat a risus.</i> Nulla facilisi. Praesent
porttitor magna sed ultricies lacinia.

Firstly, I need to enclose each word in a span with the class italic. The rationale behind this approach will be explained shortly. I employ the following jQuery script to accomplish this:

$(document).ready(function(){
    $("i").each(function(){
        $element = $(this);

        var words = $element.text().split(" ");
        $element.empty();

        $.each(words, function(i, v) {
            $element.append($("<span class='italic'>").text(v));
            $element.append(" ");
        });
    });

    $("em").each(function(){
        $element = $(this);

        var words = $element.text().split(" ");
        $element.empty();

        $.each(words, function(i, v) {
            $element.append($("<span class='italic'>").text(v));
            $element.append(" ");
        });
    });
});

Subsequently, by utilizing CSS3, I can slant the text by 10 degrees specifically for webkit browsers:

span.italic{
    display:inline-block;
    -webkit-transform:skewX(-10deg);
}

This brings me to the necessity of enclosing each word in its own span. In order for this technique to be effective, the display property must be set to inline-block; therefore, if the italicized phrase spans multiple lines, it may not wrap correctly within a paragraph unless each word has an individual span.

Drawbacks

One potential drawback of this method is that if webkit browsers eventually start supporting faux-italics, the text may appear excessively angled. Additionally, this approach only functions with  and  tags, excluding all other italicized content. Lastly, any images or additional formatting enclosed within the  tag are stripped away.

The Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Answer №1

Answer №2

Drawbacks

Similar questions

What strategies can be implemented to increase the number of backlinks?

set ajax url dynamically according to the selected option value

Angular 2's Multi-select dropdown feature allows users to select multiple options

Establishing the rotation attribute of an SVG circle to create an angular progress tracker

How to make text dynamically shrink with TailwindCSS class 'flex-shrink-0'

Why is my client program not receiving a response from this socket.io server?

Positioning a div absolutely within a targeted div

`problem with moment.js incorrectly identifying the day of a given date`

Steps to Create an HTML Text Box that cannot be clicked

What is the best way to create a highlighted navigation bar using Angular 2?

Instructions for passing a single value from a while loop and showing a different value in a text box through PHP

Shifting Transition for Customer Reviews

Unable to display image on HTML page transmitted via socket in Java

The <select> element is experiencing compatibility issues with the camera controls in ThreeJs

Implement the CSS display flex property for more flexible layouts

JQuery not properly validating inputs with required attributes after creation

Alternative background for browsers that do not have support for border-image styling

CSS - Desiring a border with three layers

Retrieve the value of the textarea only if it exceeds 15 characters

Executing a snippet of Bootstrap 5 code under specific circumstances