Customer: how will this heading look in bold?
Me: Hold a sec, I will show you *opens developer tools in chrome and increments font-weight*
Customer: NO NO NO, undo this. I don't want you to mess up my website.

¯\_(ツ)_/¯

Spent more than an hour on client's computer trying to figure out why it was rendering a font in bold, while every other device I tried (even with same browser/OS/screen DPI) rendered it in normal weight. Google Fonts were loading fine. After banging my head into TeamViewer window for the Nth time, I found the problem. The font was installed on client's computer locally, so it was overriding remotely loaded Google Fonts. What's the problem then? The local version only had bold version.

Deleting the local font fixed it.

So after two hours of debugging I get to know that Chrome doesn't differentiate between font-weight 100-500 unless on a Mac, and IE does, but IE doesn't support the <picture > tag 😶

When the WYSIWYG editor needs to go back to school for coding.

<span style="font-weight: bold;"><br></span>

How is that even useful!?

Another gem from the cunt I used to call my senior.

.nav-tabs > li > a, .nav-tabs > li > a, .nav-tabs > li > a { font-size: 7pt !important; line-height: 30px !important; font-weight: normal !important; }
.nav-tabs > li > a, .nav-tabs > li > a, .nav-tabs > li > a { font-size: 6pt !important; }
.nav-tabs > li > a, .nav-tabs > li > a, .nav-tabs > li > a { font-size: 7pt !important; }

These are all on the same level (not in media queries) and only a couple of other lines of css between them.

I swear this jackass just wanted to watch the world burn.

Client: me wants more contrast, we git complaints much

Me: stop using thin skin assed font then

Client: Impossiburu bro!

Me:
/* Excuse me */
*{
font-weight: bold;
text-transform: capitalize;
}

I so f#!ing hate how "font-weight: bold" looks on mozilla (the bottom one) compare to the chrome.
Chrome looks so modern and elegant >< .
Or is this some compatibility properties that i got to add ?

(!rant && question)

For the front-end devs out there, do you guys prefer using font-weight to change the weight of the font or do you guys prefer using separate names (Font Name Black, Font Name Bold, and so on)

I want some help with media queries I am new and learning so please don't bash me up :

Here is my css code I want to know how to solve the issue :

/* About Section */

.about
{
height:600px;
padding:50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.abouttext
{
 position: relative;
 padding: 0 50px;
 height: inherit;
}

.abouttext h1
{
position: relative;
left: 230px;
}

.abouttext img{
width:20vw;
position: absolute;
top:50px;
}

.aboutlist
{
width:50%;
}

ol
{
list-style: none;
color: #e0501b;
}

ol li
{
font-size: 34px;
position: relative;
margin-bottom: 20px;
}

li p
{
font-size:16px;
color:#000;
padding-left:60px;
line-height:30px;
opacity:0.6;
}

li span
{
float: right;
  position: absolute;
 line-height: 25px;
 font-weight: 600;
}