html - Font not working on Chrome and Firefox, but on Safari -
i have created popup kind of div
using css. here 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 html
code
<div class="popups-right"> <h3 style="color: #34213e;">ready fixed?</h3> <h3 style="color: #fff;">dont forget include <br>this form in order</h3> <h3 style="color: #fff;">simply click on image <br>and start typing</h3> <h3 style="color: #fff;">please mark areas see <br>with pins. <span style="color: #34213e;">do not</span> use tape.</h3> </div>
the font not working expected in chrome
, firefox
working great on safari
. clueless issue. please help.
but how working on chrome , firefox:
the page available live here: http://alterknit.staging.wpengine.com/packing-slip/
give every heading in bubble class, example .popups-right-title
& give styles
.popups-right-title { font-family: 'oswald', sans-serif !important; }
avoid using !important
statement declaring rules, not have such problems in future.
Comments
Post a Comment