I'm having trouble getting the font to display properly on Safari (mac) similar to how it appears on

Recently, I completed a website for a client at . The owner requested the footer text to be styled similarly to the footer text on . However, upon review, it seems that the font in the lists on desiringgod appears thinner compared to the site I built.

This issue seems to only occur when using Safari on a Mac. I've tried debugging using Web Inspector but couldn't pinpoint any differences in the code. Could someone spare 5 minutes to help me identify where the problem lies? It's becoming quite frustrating as I've been trying to resolve this for days. The original HTML and CSS were sourced from a theme, so there might be something within the theme affecting it.

Thank you in advance!

cssfontssafari

Answer №1

When viewing the bfc website, you may notice that headings like "Twitter" are not actually <h2> elements but instead 

<li class="footer_page_title">
, with styling of font-weight: normal; rather than bold.

I hope this information is helpful.

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

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

https://i.stack.imgur.com/UZM7f.png Monday.com has implemented Shadow Dom to protect its source code. How can I work around this limitation? ...

javascripthtmlcssshadow-dom

Is Flex still wrapping elements even when set to nowrap?

My goal is to create a layout with 4 blocks, where the first section contains 2 blocks each occupying 50% of the width, followed by 2 other blocks in the next section. I am utilizing the flex property for this layout. I want the flex-container to take up ...

htmlcssflexbox

The positioning of the input element within the div is set to

Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...

htmlcssposition

html how to delete the beginning and end of hr element

There is a <hr noshade> tag in my HTML code which does not have any effect on the web view. However, when I print it to a PDF file, it shows head and tail like this: https://i.stack.imgur.com/TaBAc.jpg Here is my CSS that applies styling when print ...

htmlcss

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

Best practices for organizing fonts in SCSS 7-1 architecture?

My current project restructuring involves implementing the 7-1 architecture recommended by . As part of this process, I am incorporating flaticons into my project. I'm unsure of where to place the folder and scss file provided by flaticon within the ...

cssarchitecturesassdirectory-structureproject-organization

Tips for aligning the timing of two CSS animations

I'm struggling to achieve a synchronized CSS animation where a progress bar fills up and a background changes simultaneously. For example, I want the progress bar to fill in 5000ms, with the background image changing every 5000ms as well. Despite se ...

css

Center-align the text within the dropdown menu

Here is the HTML code snippet I am working on: <select id="ddlCountry" placeholder="optional" class="select" title="Select Country"> <option value="0">country</option> </select> This is how the CSS is set up: .select { width ...

htmlcsshtml-select

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

My typescript array population is not changing the background color of my div based on the values in the array. I've attempted to set the background using [style.backgroundColor]="statusColor[i]", where statusColor is an array declared in my typescrip ...

htmlcssangulartypescript

Steps to access a Windows folder after clicking on a link within an HTML page using Asp.net

I attempted to use the following code : <a href="file:///C:\Programs\sort.mw">Link 1</a> <a href="file:///C:\Videos\lecture.mp4">Link 2</a> Unfortunately, this code does not work in Google Chrome or Firefox bro ...

htmlcssasp.net-mvc-4

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

javascripthtmlcssreactjsnext.js

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

cssangular

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

htmlcssflexbox

A centralized navigation bar featuring a logo on the left side

I am trying to create a navbar with a centered layout and a logo floated to the left side. For inspiration, check out this example: http://www.bootply.com/98314 I would like something similar to the example mentioned but instead of left-floated items, I ...

htmlcsscenternavbarnav

Setting the minimum and maximum width of a div using Bootstrap, not based on the number of columns

I want to adjust the number of columns based on the width of the screen rather than choosing a specific value like 3, 4, 5, or 6. ...

htmlcss

Is there a way to eliminate the space between the content inside a table cell and its borders?

I am struggling with a table setup that includes three columns and multiple rows. The first column contains an image, causing the cells in that row to resize based on the image size. When text is added to the 2nd and 3rd columns, it automatically centers w ...

htmlcss

Modifying CSS style according to the contents of an HTML element

Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Add a color gradient to text as it animates without displaying any code tags (HTML, CSS, JS)

I have a unique text animation that loads when the page loads. The characters will be gradually written to the screen with some words having a gradient effect. While I've managed to successfully apply the gradient, there seems to be a pause when it re ...

javascripthtmlcssanimationgradient

Applying position: absolute in HTML/CSS to lock parent and child elements in

Transform the boxes into concentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px. html: <div id="p10"> <div id ...

htmlcsspositioncss-positionabsolute

Code written in Javascript runs before any CSS files are downloaded and processed

While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided ...

cssasynchronouspreloadlighthouse