When it comes to @font-face, Chrome has no trouble detecting the font, but an issue

<style>
    @font-face
    {
        font-family : 'Avenir';
        src         : url("/fonts/Avenir999.otf");
    }

    p.price a span
    {
    /*font-family   : 'Avenir';*/
      font-size     : 45px;
      color: #889900;
    }

</style>
<p class="price" style="border:1px solid red;">
        <a href="#"><span>this text is positioned above the center of the red box if the //font-family is uncommented.</span></a>
</p>

Once again, the font appears to be correctly detected and everything works smoothly. When I apply the following style:

p.price a span
{
  font-size     : 45px;
  color: #889900;
}

the display is perfect. However, when I introduce the font-face declaration like so:

p.price a span
{
  font-family   : 'Avenir';
  font-size     : 45px;
  color: #889900;
}

the font style changes (which is good), but it shifts upwards almost out of the 1px solid red rectangle. Why does this happen? Is there a way to correct it? The issue arises solely from the font usage; no padding or margin adjustments have been made.

This discrepancy is present in Chrome, whereas Firefox displays the content properly.

Answer №1

There seems to be an issue with the font file you're using. I recommend utilizing Font Squirrel's font generator to create your own font files for @font-face. This tool will produce CSS code that is compatible across various browsers, ensuring a better display of your fonts.

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

Discrepancy in the vertical pattern repetition of the SVG background

When I use a simple div with an SVG set as a background image with vertical repeat, I noticed a gap of varying sizes on Chrome and Firefox depending on the screen size (please resize the window). Check out the issue here .bg { width: 50%; height: 2 ...

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

Open the window by using the `Window.open` method, then find and

Is there a way to open a document, not in a new window but on the same page using JavaScript.Window.Open()? Could it be possible to display the document within a specific div element that is obtained with getElementById? For example: document.getElementB ...

Trouble linking HTML, Javascript, and CSS - seeking help to get them working properly

Hey there! I'm currently trying to transfer my project from Codepen at here to repl.it (This project) which you can find at this link. Don't forget to click run after checking it out! The code is working perfectly fine on Brackets with the same ...

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

Troubleshooting the Issue with Jquery Menu and Mouse Pointer

Recently, I've been attempting to modify the cursor behavior on a navigation menu that I stumbled upon at HTML Drive's JQuery Menu. I experimented with CSS and jQuery. In my JQuery attempt, I utilized... $("body").hover(function() { $(this).cs ...

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

Transform Table header orientation to vertical

I am struggling with a table structure similar to this <table> <thead> <tr> <th>Numbers</th> <th>Alphabet</th> </tr> </thead> <tbody> & ...

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

A different option for incorporating interactive external content without using iframes

Excuse me for asking if this question has already been answered, but I was unable to find a solution that fits our specific needs. Is there a more effective method than using an iframe to embed external content in a website? Our objective is to provide a ...

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

Is it possible to designate a specific font family for italic font style and a different font family for regular font styles in VSCode?

Is it possible to use the "Operator Mono" font only for italic style and another font, such as "Fira Code," for other styles like bold, regular, semibold, etc. in VSCode? I attempted to change the font family to: "editor.fontFamily": "'Operator Mono ...

How can I address multiple buttons with various events using jQuery?

I am new to learning jQuery and I'm currently working on some exercises. However, I've run into an issue with two buttons in the DOM that are supposed to perform different actions. I can't seem to figure out how to assign different functions ...

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

Animate the toggling of classes in jQuery

Here is a code snippet that I came across: $('li input:checked').click(function() { $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000); }); This code is functioning correctly when the element is clicked for the first time. I ...

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

What is the best way to resize a div located below a dynamic div in order to occupy the available space?

My website has a dynamic div1 and a scrollable table inside div2. I need the div2 to take up the remaining height of the window, while ensuring all divs remain responsive. I've tried using JavaScript to calculate and adjust the heights on window loa ...

In a jQuery conditional statement, selecting the second child of the li element for targeting

I'm encountering an issue where I can't target the second child of an li element and use it in a conditional statement. Are jQuery conditionals not compatible with li:nth-child(2)? if($(".steps ul li:first-child").attr('aria-selected') ...

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width he ...