I AM STRUGGLIGN how to make pretty text stroke (for profile layout)???

OKAY SO BASICALLY i want to make text in headings have a stroke so they match the logo thing in the corner of my profile but i can't get them look right on all browsers!!!

This is how it looks like on Firefox, completely fine

But this is how it looks like on Chrome, the stroke is inside the text instead of outside....

This is the code i'm using rn
.contact h4:after, .table-section h4:after {
font-size: 12px;
color: #F6977A;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #50202E;
paint-order: stroke fill;
}