Sibidharan Sibidharan - 1 year ago 58
CSS Question

Font not working on Chrome and Firefox, but on Safari

I have created a popup kind of

using css. Here is my code.

@import url(,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

<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>

The font is not working as expected in
but working great on
. 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:

Answer Source

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

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