wynnieb

Site URL: https://radamweds.com/rsvp

I added custom css to change the font in my form and it previews fine in the mobile view but when I actually go to the website on my phone it doesn't show up. Some of the css does work - the colours and the hover on the bottom - but the font just isn't working. I would love any advice/tips on how to make it work

  how it's supposed to look, and how it previews when editing 

VS

how it's actually looking on my phone

My css is below:

.form-wrapper .field-list .field {font-family: Futura PT!important;  
letter-spacing: .15em;
  font-size: 14px;
  color: #fb3576;
  text-transform: uppercase;
}

.form-wrapper .field-list .title { font-family: Futura PT; 
font-size: ; 
  color: #3b3a3a; 
  letter-spacing: .15em; 
  text-transform:capitalize ; 
}
.form-wrapper .field-list .field .caption {
  font-family: Futura PT;
  font-size: 9px;
  color: #fb3576;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.form-wrapper .field-list .field .field-element {
  font-family: Futura PT;
  background-color: #fefefe;
  border: 1px solid #fb3576;
  border-radius: 0;
}

.form-wrapper input[type=submit] {
  font-family: Futura PT; 
letter-spacing: .25em;
  color: #fefefe;
  text-transform: uppercase;
  transition: all .6s ease 0s!important;
}

.form-wrapper input[type="submit"] {
 display: block;
 background: #3b3a3a;
 color: #fefefe;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
}
.form-wrapper input[type=submit]:hover {
  color: #fefefe !important;
  background-color: #eac2de !important;
}