4

I tried to use font BabeNeue which is available at font-squirrel

I have used following code

<input type="submit" name="checkout" value="Checkout" class="checkout">

Following CSS

input#purchase, input.checkout, .btn-border {
color: #D39229;
background: rgba(0, 0, 0, 0);
border: 3px #D39229 solid;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
border-radius: 0px;
padding: 4px 20px;
line-height: 18px;
box-sizing: border-box;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
cursor: pointer;
align-items: start;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'BebasNeue', 'Trebuchet MS', sans-serif;
font-size: 18px;
}

and imported font from my location

Now font rendered correctly in windows, but it has issue with iPhone and Mac. text is shifting bit up.

enter image description here

Now if I change button font to Arial, It works fine on all browsers and devices.

Demo here

Dylan Corriveau
  • 2,561
  • 4
  • 29
  • 36
Ashish Kasma
  • 3,594
  • 7
  • 26
  • 29
  • 2
    I believe that is a problem with the font's ascender property, see http://stackoverflow.com/q/7535498/2126792 – pschueller Mar 11 '15 at 10:17

1 Answers1

0

I've had trouble's with this font on firefox and chrome (getting the size and line-height right)
I've tinkered with the code a bit and this worked fine for me
(couldn't tell what align-items did though never seen or used it before)

input#purchase, input.checkout, .btn-border {
  padding: 4px 20px;
  font-family: 'BebasNeue', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  border: 3px #D39229 solid;
  border-radius: 0px;
  cursor: pointer;
  color: #D39229;
  background: rgba(0, 0, 0, 0);
  /* I couldn't tell if you needed this or not so I just left it alone*/
  align-items: start;
}