The bolded typography in Google Font appears to be positioned lower than typically expected

When using the Vollkorn google font in my headings, I noticed a strange issue where the text gets pushed beyond the bottom boundary of the element only in Firefox and Chrome when using the default bold weight and normal font style. However, when switched to italic, it returns to its normal position. This problem does not occur when the font has a normal weight.

I created a simple HTML file to demonstrate this behavior, but strangely the issue only exists on my computer. When I sent the file to someone else, they did not encounter the same problem in those two browsers.

I attempted to replicate the issue on jsFiddle without success. http://jsfiddle.net/5WDJU/1/

a

For simplicity, I added jQuery to the code on Pastebin. http://pastebin.com/yXzHqKrD

Here is a screenshot showcasing the problem on my screen.

I also tried inspecting the styles on the google font website using Firebug, but everything appeared to be working correctly there.

Could I be missing certain styles that would resolve this inconsistency like on jsFiddle or the font website? It's puzzling why the issue doesn't arise on the recipient's computer after sending them the file. Could this be a potential drawback of using google fonts?

htmlcsswebfontsgoogle-font-api

Answer №1

Perhaps the issue lies in the lineheight or padding settings. To investigate further, you can use the "inspect element" feature in Chrome or Safari (right-click) to see which styles are currently affecting the input form. Have you considered incorporating a reset css? You can find one at

Answer №2

Upon further investigation, I have come across two similar cases where individuals have encountered the same issue. At this point, it seems unlikely that the problem lies within the CSS code. It remains unclear whether the discrepancy is a result of Google's font itself or how Firefox and Chrome interpret the font.

For reference, here are the links to these instances:

http://code.google.com/p/googlefontdirectory/issues/detail?id=37

To address the issue, I followed the solution provided in the first link by downloading the bold non-italic font from FontSquirrel and embedding it into my website.

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

Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic l ...

cssdeveloper-tools

Ways to showcase a div exclusively on UC mini browser

I'm looking for help to create a script that will only display a div with the class "info-box" in UC Mini browser. This div should be hidden in all other browsers. Can someone assist me with this? <!doctype html> <html> <head> <m ...

javascriptjquerycssproxy

Ways to conceal the initial value of a form field?

Currently, my form includes two options - 10 and Other. There is also a text field next to the option for 'Other' where users can enter a specific amount. Here's how it's set up: <input class="mainForm" id="Amount" name="Amount" typ ...

javascripthtmlforms

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

cssregextextmatetextmatebundles

Having trouble getting the jquery tabify plugin to work properly

I've put in a lot of effort and double-checked everything, but for some reason this tabify function just won't work. I have gone through my code 100 times but still can't seem to pinpoint the error. Here is the code I am working with: <! ...

javascriptjquerycss

Is it possible for HTML 5 cache manifest to function with AJAX requests as well?

I've been working on implementing HTML 5 offline application cache with an ASP MVC 3 website. Unfortunately, I'm encountering a problem where navigating to a page in offline mode doesn't seem to be functioning properly. My approach involves ...

htmloffline-cachingoffline-mode

Complete visibility of Bootstrap progress labels is compromised

Progress bar with a customized label inside: <div id="progress" class="progress mb-1" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valu ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...

htmlcssangularjstwitter-bootstrap

"Creating visual art with processing in 2D using P5

Recently, I came across a webpage about rendering 2D objects in processing using JavaScript. Here is the link to the page: Upon trying out the example code provided on the page in a new P5 project, I noticed that the code structure looked like this: HTML ...

javascripthtmlprocessingp5.js

Issue with loading the main.css file

Getting Started Managing two domains can be a challenge, especially when trying to make them appear as one seamless website. In this case, I have ownership of and . Goal My goal is to merge the content of https://mauricevandorst.com/personal-page/index ...

javascripthtmlcss

WordPress sidebar on bottom due to conflict with 960 grid in IE 7/8

After successfully validating my site with w3c, I encountered one small issue. The "& errors" link needed to be replaced with just "&" for the Google Maps link. However, in IE 7/8, there seems to be a conflict with the layout of the site. The sidebar ...

htmlwordpresscsssidebar960.gs

Tips for distinguishing between mobile devices and desktop computers on a webpage without using media queries

After examining a list of resolutions for phones and tablets used by CSS designers, I came to the realization that some devices have larger resolutions than most computers. This got me thinking about how design elements on my webpage might be affected. Th ...

jqueryhtmlcss

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

javascriptjqueryhtmlcss

Grid system not being followed by table in Bootstrap layout

I'm struggling to figure out why the table I have doesn't follow Bootstrap's grid system. It took me a good 2 hours to pinpoint and fix the issue. Any help would be greatly appreciated. I could share the code, but it might be easier for you ...

htmlcsstwitter-bootstrap

creating dynamic animations using jQuery UI's position() method

Is it possible to animate from the current position to the center using the position({of:,my:,at:}) function? I'm seeking a way to automate this process rather than manually animating the CSS properties. ...

jquerycssuser-interfacejquery-animatepositioning

Enhancing CSS with Additional Properties

As a web developer, I recently had the opportunity to explore the new LOGIN PAGE preview of GMAIL and was very impressed with the Sign In button's UI. After examining the Page's CSS, I discovered some interesting properties, such as: **backgroun ...

csswebkit

Issues with Dreamweaver CS5's live preview feature and compatibility with different web browsers

Hey there, I recently sliced an image using Fireworks and exported it to HTML. After opening the HTML file in Dreamweaver, I saved it as PHP and everything seemed fine. Then, I replaced some images with HTML input tags and buttons, setting their width and ...

phphtmlcssdreamweaver

Effective ways to implement Select2 tags while utilizing the newline character tokenSeparator

I'm currently working on a select2 input feature that allows users to paste CSV data and have it converted into tags. One issue I am facing is the inability to create tags from vertically copied data. This is due to select2 using an <input type="te ...

jqueryhtmljquery-select2

Aligning Text Vertically with an Image in ul/li List Items

Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while t ...

htmlcsstwitter-bootstrapvertical-alignment

"Error message: Undefined index error when trying to decode JSON

In my database, there's a JSON file named articles.json which contains data as follows: { "articles": [ { "id": 1, "title": "a" } ] } Now, I have written a script to decode this JSON file: <?php include "inc/header. ...

phphtmlarraysjson