Styling Fonts in Safari with CSS

Because FixedSys doesn't appear correctly in Chrome or Safari, I switch it to Lucida Console. While this solution works for Chrome, I encounter a problem with Safari. Unless Lucida Console stands alone, the font will not display as desired. If there are other styles present, it causes issues.

Take a look at the following image:

The first "Hello world!" text appears strange to me because it does not match my default Times New Roman font in Safari. I have double-checked and confirmed that there are no conflicting styles causing this issue.

htmlcss

Answer №1

font-family uses a fallback system that relies on the fonts installed on your device: for example, if you have FixedSys installed, Safari will try to use it. If you're experiencing issues with FixedSys not working in Chrome or Safari, it could be due to incorrect interpretation or a corrupt version of FixedSys.

Considering that Safari 4.0 final was released in 2009 and the current stable version is 5, there may have been a bug in Safari 4 beta's font rendering code.

In browsers like Safari, Chrome, Firefox, and newer versions of IE that support CSS correctly, there is no direct way to force a specific font fallback. You may need to either fix the issue with FixedSys (such as upgrading to a stable Safari version) or remove it from the font-family declaration.

Additional points to consider:

  • Lucida Console is not commonly installed on Macs, so for cross-platform compatibility, consider providing a fallback option like monospace.
  • According to CSS specifications, multi-word fonts should be enclosed in quotation marks. Make sure your CSS format follows this rule: 
    font-size: FixedSys, "Lucida Console"

Answer №2

Would using quotation marks around "Lucida Console" have any effect?

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

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

javascripthtml

Node.js is able to read an HTML file, but it seems to have trouble locating and loading

Struggling to load a jQuery file or any file in a node.js read HTML document. After spending considerable time on this issue, I realized that the Google-hosted library file works fine but my local file does not. The problem seems to be related to directing ...

jqueryhtmlnode.js

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

cssfirefoxcss-position

Utilize jQuery to dynamically add a CSS class to a button

When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...

jqueryhtmlcss

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! <html> <head> <meta content="text/html; c ...

htmlcsshtml-email

JavaScript: Remove just the specific user input without affecting the rest of the HTML block

I'm facing a dilemma with deleting a specific user input without removing the entire HTML block. I know that the delete button triggers on the HTML ID 'noteDelete', which is the parent of each user input. However, I'm unsure about how t ...

javascripthtml

Core MVC - Adjusting Font Size

After setting up an MVC Core App with automatic scaffolding, I am now faced with the challenge of adjusting the font size in my html View. The question is: How can I change the font size in bootstrap.css? There seem to be multiple font sizes available an ...

c#htmlcssasp.net-core-mvc

Mobile Menu in wordpress stays visible after being clicked

I recently created a one-page layout that includes some links. However, when I view the site on my smartphone and open the main menu using the button to click on a link (which scrolls within the same page), I noticed that the mobile menu remains visible a ...

javascriptjquerycsswordpress

Angular: NaNa: Attempting to access a property of an undefined variable

I've encountered these errors although the values are displayed correctly in the browser. I'm unsure about how to resolve this issue. ERROR TypeError: Cannot read property 'length' of undefined ERROR TypeError: Cannot read property &ap ...

javascripthtmlangular

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

AngularJS - Create Alert Pop-Up for Missing Input Fields

I've been struggling to set up my app so that it displays an alert when the user attempts to submit a form with an empty input box. Despite having a confirmation popup working in another part of the application, I can't seem to figure out why thi ...

javascripthtmlangularjs

Issue with division operation in HTML not functioning

I've been working on a division calculation within an HTML file, but so far I haven't had success using PHP or JavaScript. While {{ property.listprice }} is correctly displaying a number in the HTML file, the other elements are not functioning as ...

phphtml

Show content when box is ticked

I am looking to display a row of text when a checkbox is checked, but I am finding it challenging as a beginner in this. Despite trying to understand other answers, I still struggle with the process. Here is what I have attempted so far: function RiskPl ...

jqueryhtmlcheckbox

Issues with PHP not retrieving selected radio button values

Currently, I am using a PHP webpage to generate a list of all files with a .264 extension in a specific folder. Once the file is selected, it is then sent to a command for video playback on a display connected to the computer. I have encountered some diff ...

phphtmlforms

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

javascriptphpjqueryhtml

Alter the color of Material UI Raised Button when it is hovered over

I am trying to change the background color of a raised button on hover in Material UI. I attempted the following, but it did not work. Is there a way to modify the background color in Material UI for a raised button? Example.JS <RaisedButton ...

cssreactjsmaterial-ui

Leverage XMPP with the power of HTML5

I have been intrigued by the integration of xmpp (Extensible Messaging Presence Protocol) with html5 and javascript. How can one implement an xmpp chat in html5? ...

htmlxmpp

The lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

After years of working with traditional compiled object-oriented languages like C++ and .NET programming, I decided to dip my toes into JavaScript for a new project. As I was experimenting with AJAX, I stumbled upon a perplexing aspect related to how objec ...

javascripthtmlajaxxmlhttprequest

What is the best way to invoke an external JavaScript source using another JavaScript source?

I am trying to connect 2 different files together. file1.php and document.html file1.php has the following code in it: document.writeln('< script src="https://www.googletagservices.com/tag/js/gpt.js"> googletag.pubads().definePassback ...

javascriptjqueryhtml