Coincidence of Characters in Google Font on iPhone and Firefox

I am facing an issue with my site's logo that uses the Google font "Cinzel". The problem occurs when I view the site on Firefox or iPhone, where the two center letters overlap. Is there a way to fix this overlap?

Note: I have already attempted adjusting the letter-spacing without success for the center letters.

Corresponding CSS:

.brand {
    font-family: 'Cinzel Decorative', serif;
    text-decoration: none;
    text-transform: lowercase;  
}

.home{
    font-size: 1.5em;
    display: inline-block;
    height: 60px;
    padding: 16px 0px 4px 0px;
    margin-top: 1px;
    color: #000000;
}

Chrome View:

Firefox/iPhone View:

Any assistance would be greatly appreciated!

cssfont-facewebfontsgoogle-webfontsgoogle-font-api

Answer №1

Regrettably, I was unable to resolve the problem with Google Web Fonts. As an alternative solution, I decided to utilize a webfont kit provided by FontSquirrel, which appears to be working seamlessly without any issues. Here is the link to access the FontSquirrel webfont kit:

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

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container' ...

javascriptjqueryhtmlcss

Using ng-class with the Angular Material chips component

Is there a way to add backlight to chips with an 'active' flag based on my key value type using ng-class="{activeTag: $chip.active}"? I tried implementing it but it doesn't seem to work. How can I incorporate this ng-class into dynamically c ...

javascriptcssangularjsangular-materialmd-chip

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-5

Is it possible for an animation to complete even if it is stopped midway?

I am currently working on a media player project where I have implemented a scrolling marquee effect for the song meta information using JavaScript and CSS. The scrolling effect only occurs when the track is playing, and I achieve this by adding/removing ...

javascriptcss

Navigating through a modal without affecting the main page's scroll position

My webpage has some content, and I also have a modal that pops up on top of it. The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead. Below is the CSS code: html, body { b ...

htmlcssmodal-dialog

Select the top row of a table when the checkbox is ticked to emphasize it

Previously, I tackled a challenge on a webpage using jQuery where checkboxes in a table needed to be selected based on specific data attributes. Essentially, if one checkbox in a row was selected, the rest of the checkboxes would be disabled if their data ...

javascriptjquerycss

Bootstrap Toggle appears on screens of medium size

While working on creating a responsive dashboard with Bootstrap 4.3, I encountered an issue specifically with medium screens. Upon resizing Google Chrome to test the page at various sizes, I noticed that the bootstrap toggle button would unexpectedly appea ...

cssbootstrap-4toggle

The affix feature in Bootstrap's navbar fails to recognize the height of images

My navbar element affixes prematurely when placed below my header element, making it seem as if the image in the header does not exist. The navbar is meant to affix only when it reaches the top, but currently, it is affixing earlier. The code I used sets ...

javascriptcsstwitter-bootstrapaffix

Spin a Material UI LinearProgress

I'm attempting to create a graph chart using Material UI with the LinearProgress component and adding some custom styling. My goal is to rotate it by 90deg. const BorderLinearProgressBottom = withStyles((theme) => ({ root: { height: 50, b ...

javascriptcssreactjsmaterial-uirotation

``When the screen size is reduced, the Bootstrap columns will resize and appear next to

Struggling to create a responsive web design similar to: https://i.sstatic.net/scRyw.png When resizing, I want the skills section to appear side by side under the introduction: https://i.sstatic.net/SLzsx.png The issue lies with the layout of the introdu ...

htmlcsstwitter-bootstrapbootstrap-4

I aim to have just the footer section perfectly aligned within the screen, without the entire body extending beyond

I am encountering an issue with the footer tag once again. I need this section to occupy the entire screen, without affecting the rest of the body content. That is why I omitted setting margin:0; for body elements. I attempted to apply margin:0 to the foo ...

htmlcss

Switch out one picture for another by hovering over it

Looking for a way to replace the holder-01-small.png image with one of the same dimensions on hover without altering the HTML code. Here is the code snippet: <div class="mix category-1"> <a href="img/holder-01-large.png" class="photo"> <i ...

htmlcsshoverpseudo-class

The time function that is stored in the browser's local storage is persisting even after attempting to delete it with window

I have been designing an application that tracks the expiration of food items displayed in a restaurant. The user inputs the food details when it is transferred from the kitchen to the display, triggering a timer based on the intended display duration (1 h ...

htmlcssreactjsnode.js

How to use multiple class names with Next.js module CSS

Currently, in my project I am utilizing Next.js along with module.css. However, I have encountered an issue. There is a "button" component nested inside another component. I am trying to apply both a normal className and Style.myClass to this button compon ...

cssreactjsnext.js

The panel element is being encroached upon by a sidebar

I'm currently developing a basic chat application and I'm in need of a collapsible sidebar for users to select different chat rooms. Unfortunately, the current fixed sidebar is overlapping the panel element where the chat conversations are suppos ...

jqueryhtmlcsstwitter-bootstrap

Div controls the margins of all other elements

I am encountering an issue when trying to position #slider, where the navigation and elements above it also move. It seems as though they are contained within #slider, even though they are not. HTML: <div id="slider" class="clearfix"> <d ...

htmlcsscss-float

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

javascripthtmlcssangularjs

What are the steps to creating a multi-level horizontal dropdown menu with subcategories and sub-subcategories?

Does anyone know how to create a horizontal dropdown menu like the one on the Parkour Generations website, but with a sub-sub menu that appears horizontally when hovering over the submenu? In Parkour Generations, if you navigate to classes -> outdoor, ...

javascriptcssmenu

What are the steps to creating a fading effect for an item that appears as it enters the field of view and disappears as it exits the field of view?

Implementing a fade-in effect for a button as the user scrolls down and the button comes into view, along with a fade-out effect as the user continues scrolling down and the button goes out of view. var fadeInButton = $('#fadeInButton'); ...

jquerycss

CSS: Card elevates when keyboard is activated on a mobile device

[view image 1[view image 2] Image 1: Normal View, Image 2: When the keyboard is enabled, the card jumps up and when I close it's normal. Is this behavior normal? Or is there a fault in my CSS? I utilized styled-components for writing the CSS. CSS ...

cssreactjsflexboxstyled-components