Sibidharan Sibidharan - 6 months ago 7
CSS Question

Font not working on Chrome and Firefox, but on Safari

I have created a popup kind of

div
using css. Here is my code.

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
.popups-right {
background: #f57b20 none repeat scroll 0 0;
border-radius: 40px;
font-family: 'Oswald', sans-serif !important;
color: #fff;
font-size: 26px !important;
text-transform: uppercase !important;
font-weight: bold !important;
right: -120px;
padding: 15px;
position: absolute;
text-align: center;
width: 33%;
line-height: 40px;
}

.popups-right::after {
border-left: 0px solid transparent;
border-right: 54px solid transparent;
border-top: 20px solid #f57b20;
bottom: -12px;
content: "";
display: block;
height: 0;
position: absolute;
width: 0;
}


Here is my
HTML
Code

<div class="popups-right">
<h3 style="color: #34213e;">ready to get fixed?</h3>
<h3 style="color: #fff;">dont forget to include <br>this form in your order</h3>
<h3 style="color: #fff;">simply click on this image <br>and start typing</h3>
<h3 style="color: #fff;">please mark any areas you see <br>with pins. <span style="color: #34213e;">do not</span> use tape.</h3>
</div>


The font is not working as expected in
Chrome
and
Firefox
but working great on
Safari
. I am clueless about the issue. Please help.

This is how it looks in safari:
enter image description here

But this is how it is working on chrome and firefox:
enter image description here

The page is available live here: http://alterknit.staging.wpengine.com/packing-slip/

Answer

Give to every heading in bubble a class, for example .popups-right-title & give styles

.popups-right-title {
  font-family: 'Oswald', sans-serif !important;
}
Comments