Post

3 followers Follow
1
Avatar

Custom font in web form CSS

How can I add a custom font to my web form CSS? Our company branding uses the font 'Quicksand' (http://www.dafont.com/quicksand.font). Is there a way to load this within Podio? 

Have copy and pasted the part of the style sheet to be edited:

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

Any help is much appreciated!

 

 

Anneka France

Please sign in to leave a comment.

5 comments

0
Avatar

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

 

Chang Huang 0 votes
0
Avatar

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;
}
Anneka France 0 votes
0
Avatar

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);
}
Anneka France 0 votes
0
Avatar

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");
Anneka France 0 votes