Font may seem more slender in Firefox and Safari compared to Chrome where the appearance is impeccable

I am currently working on achieving consistent font appearance across Mac Chrome, Safari, and Firefox (IE compatibility to be addressed later).

My experiments have included:

 -webkit-font-smoothing: subpixel-antialiased;

The font appears almost identical, but in Safari and Firefox it seems slightly lighter in weight.

I have also tested:

-webkit-font-smoothing: antialiased;

And for Firefox:

-moz-osx-font-smoothing: grayscale

In addition, I have the following set:

text-rendering: optimizeLegibility !important;

This approach results in a fairly consistent font appearance, although not as smooth as when using subpixel antialiasing.

Is there a missing property that should be added? While I understand complete uniformity may not be possible, I expected better consistency between two WebKit browsers like Chrome and Safari.

The font in question is Raleway from Google Fonts, if that information helps in any way.

htmlcssgoogle-font-api

Answer №1

My preferred technique involves utilizing

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

or

-webkit-text-stroke: 0.5px
-webkit-text-stroke-color: identical to text color;

Hopefully, you find this information beneficial. Appreciate it!

Answer №2

Encountered a similar issue recently with the same parameters and font type (Raleway from Google). It appears that Safari faces difficulties in rendering the font sent by Google Fonts API when integrated into their code.

While other browsers respond effectively to this 

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
call for Raleway font weight 900, Safari does not.

SOLUTION:

To address this, modify the source to a standard http. As recommended here, use 

@import url(http://fonts.googleapis.com/css?family=Raleway:900);

Additionally, ensure to specify the font weight on the element.

h1{
  font-weight:900;
}

For those using LESS or SCSS, achieving this can be simplified through a mixin mechanism, though diving deeper into this goes beyond our current scope.

Answer №3

It's possible that the font-weight in your code is set to a lighter value. You can try adjusting it to a normal weight by using font-weight:normal; or font-weight:400;

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

Unusual CSS rendering hiccup

Using jQuery, I am manipulating the display of an <a> element. Depending on certain keypress events, it adds or removes a class from an <input> element (which controls the display) that is related as a sibling to the mentioned <a>. The i ...

javascriptjquerycsscss-selectors

using outlines for FontAwesome icons in React Native

I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly. import IconFA from 'react-native-vector-icons/FontAwesome'; < ...

javascriptcssreactjstypescriptreact-native

Ensure advertisements are easily accessible and not visible to screen-reading tools

I oversee the management of numerous ads on a website. My goal is to enhance their accessibility, and though I have been doing research, there seems to be limited information available on how to achieve this effectively. While I continue my investigation, ...

htmliframeaccessibilityadswai-aria

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

htmlangularangular-materialdatepickerangular15

Adjust the height of a div element back to its original size using jQuery after it

My goal was to create a dynamic div that expands when the user clicks on it, revealing more information. I have successfully achieved this functionality. However, my next objective is to modify the script so that the height of the div changes back when the ...

jqueryhtmlresize

Using a locally hosted HTML page to update a JSON file stored on my computer

In my current project, I need to reorganize data stored in an array named unknown. Each item in this array needs to be moved either to a new array called good or another one called bad. let data = { "bad":[], "unknown": ["b", "a", "d", "g", "o", ...

javascriptpythonhtmlnpm

What is the correct way to format the headings for sub-level pages, like chapters within a novel or sections within a lengthy article?

At times, the text and image content becomes too expansive to fit on a single page. However, preserving the context of the content is crucial, making it necessary to display it explicitly from a user experience perspective. This could include chapters of a ...

htmlseosemantic-markup

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

Adding a slight 1px right margin between an HTML table and its enclosing div in Bootstrap 3

Help! I'm trying to troubleshoot some HTML issues and can't figure out where this pesky 1px gap between my table and the wrapping div is coming from... Just for reference, I am using Bootstrap. I suspect that it could be a glitch in the Bootst ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using PHP variables in CSS styling

Let me explain the situation. In my index.php file, I have a class called 'rectangles' which includes properties for color and size. I defined a variable named $rectangle($rectangle=new rectangles('red',25);). Additionally, I include ...

phphtmlcssinclude

Retrieve information from the table and display it in a reverse order

Below is a link to view the table in my database: click here I want to retrieve and display the names of users whose user_group is "member". I plan to put their ratings in an array and then print their names in descending order based on their rating. For ...

phphtmlmysqlsql

Numerals for Central Leaflet Marker

Is there a way to effectively center numbers inside markers? Here is the current situation: View Marker with Number How to Create a Marker return L.divIcon({ className: "green-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAn ...

javascriptcssreactjsleafletreact-leaflet

Assistance needed to identify CSS issue specifically in FireFox browser

Working on a new webpage and encountered an issue with the HTML markup: <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8"> <title>TileTabs</title> <link rel="stylesheet" href="css/style.css" t ...

cssfirefoxgoogle-chrome

Merge JSON object information into tables, including column headings

I am currently facing a challenge in loading multiple JSON files into tables within different divs. Here is the structure of my JSON data: JSON file 1: [ { "id": 12345, "code": "final", "error": "", "data": [ ...

javascriptjqueryhtmljsonappend

Internet Explorer and CSS: How to eliminate a highlight that pops up when the button is clicked

Could you please check out this website in Internet Explorer (I've tried it on the latest version as well as older versions.) On the above link, there are two circular buttons at the bottom of the page. In IE, when you click on a button, a semi-trans ...

htmlcssinternet-explorerhighlight

Why won't the div move when I click it?

Could you please explain why my JavaScript code isn't functioning as expected? The intended behavior is for the 'mark' div to move to the current mouse coordinates upon clicking within the map. ...

javascripthtmlcss

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

javascriptjqueryhtmlcssbutton

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

javascriptandroidhtmliosphonegap-build

Is it possible to make a link_to, which is essentially a normal <a href>, clickable through a div that is also clickable?

I am currently dealing with a clickable div element which has a collapse functionality, and there is also a link placed on top of it: <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-h ...

javascriptjqueryhtmlhyperlink

Utilizing functions for object creation in JavaScript

Having trouble with creating a function that automatically generates an object and then alerts its properties. Can't seem to get the alerts when I click the button. Any assistance would be appreciated. <html> <head> <s ...

javascriptjqueryhtmlfunctionobject