Custom font in web form CSS

Comments

5 comments

  • Chang Huang

    Quicksand is available through Google Fonts.

    <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
    body,
    .help-block {
    	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    	font-size: 14px;
    	line-height: 20px;
    	color: #333333;
    	background: #ffffff;
    }

     

    0
    Comment actions Permalink
  • Anneka France

    Tried adding @font-face rules to the CSS but still no luck loading the custom font

     

    @font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: local('Quicksand Regular'), local('Quicksand-Regular'), url(http://fonts.gstatic.com/s/quicksand/v5/sKd0EMYPAh5PYCRKSryvW1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }
    body {
    	font-family: 'Quicksand', sans-serif;
    	font-size: 14px;
    	line-height: 20px;
    	color: #333333;
    	background: #ffffff;
    }
    0
    Comment actions Permalink
  • Chang Huang

    It works for me. Do you have a testing page?

    1
    Comment actions Permalink
  • Anneka France

    This is the shareable link for one of the webforms: https://podio.com/webforms/15476199/1037584

    This is the CSS I was given - I only want to change the font to fit the branding guidelines and keep the rest. 

    body,
    .help-block {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    background: #ffffff;
    }

    label {
    text-transform: uppercase;
    }

    textarea.form-control,
    input.form-control,
    select.form-control,
    .Select-placeholder {
    color: #727272;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    }

    .webforms .relationship-select-field .Select-control {
    border: 0;
    }

    .input-group-addon {
    background-color: #333;
    border: 1px solid #333;
    }

    .btn {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5480b2;
    background-image: -moz-linear-gradient(top, #548db2, #546eb2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#548db2), to(#546eb2));
    background-image: -webkit-linear-gradient(top, #548db2, #546eb2);
    background-image: -o-linear-gradient(top, #548db2, #546eb2);
    background-image: linear-gradient(to bottom, #548db2, #546eb2);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff548db2', endColorstr='#ff546eb2', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }
    0
    Comment actions Permalink
  • Anneka France

    Thanks, I've got it working now. I was missing the import function at the beginning of the CSS:

    @import url("https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic");
    0
    Comment actions Permalink

Please sign in to leave a comment.

Powered by Zendesk