Any way to use a custom font in the webform?

November 16, 2014 03:59

I'm trying to use the font family which I'm pulling into my main stylesheet with @font-face. But no dice.
Is it possible to us my custom font?

Thanks!

Comments

13 comments

Ron van der Plas

November 16, 2014 14:18
Hi Alicia,

Check https://podio.com/extensions/11
I don't use it myself but it seems appropriate.

::Ron
0

Comment actions Permalink
Andreas Haugstrup Pedersen

November 17, 2014 23:39
What's the exact lines of CSS you are using in your webform?
0

Comment actions Permalink
Alicia St Rose

November 17, 2014 23:47
I'm trying to use:

body {
font-family: 'diavlobook', sans-serif;
}

But may not work if font isn't installed on server at Podio...
0

Comment actions Permalink
Andreas Haugstrup Pedersen

November 17, 2014 23:48
You must have more css than that one line. What does you @font-face rules look like?
0

Comment actions Permalink
Alicia St Rose

November 18, 2014 01:08
Are you talking about Podio CSS or my website styles? I only have @font-face in my website styles. Didn't think that the relative paths to the fonts would work.
0

Comment actions Permalink
Andreas Haugstrup Pedersen

November 18, 2014 20:57
Your webform runs in an iframe so it doesn't share any styles with the surrounding website. You need to duplicate your @font-face rules from the website css to your webform (and use absolute URLs instead of relative ones).
0

Comment actions Permalink
Matt Clifton

November 30, 2014 07:34
Hi Andreas, please can you give an example of using absolute URLs for a custom font in the CSS?
0

Comment actions Permalink
Andreas Haugstrup Pedersen

December 01, 2014 15:17
Use URLs that begin with http:// ? I'm not sure I understand your question.
0

Comment actions Permalink
Matt Clifton

December 01, 2014 19:13
Thanks, I would just like to see a CSS example script that uses absolute URLs, so I can adapt that for my own needs to access an external font. I'm new to it, so seeing one would help me understand it.
0

Comment actions Permalink

Andreas Haugstrup Pedersen

December 01, 2014 19:41

Google webfonts example:

@font-face {
  font-family: "Tangerine";
  font-style: normal;
  font-weight: 400;
  src: local("Tangerine"), url(https://fonts.gstatic.com/s/tangerine/v6/HGfsyCL5WASpHOFnouG-RIX0hVgzZQUfRDuZrPvH3D8.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: "Tangerine", serif;
}

Matt Clifton

December 01, 2014 22:46
Got it - looks good. Will give it a go - thanks!
0

Comment actions Permalink

Anneka France

April 20, 2016 09:48
Edited

I've copied the @font-face rules from the company website to the top of my css style sheet, however I still can't seem to load the font in the Podio webform. Any suggestions?

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

Stefan Falkboman

June 01, 2018 11:35

Edited
I'm trying to get this straight in Chrome (works well in Safari etc). First it didn't work without HTTPS-serving the fonts, so that's sorted.

Now i get the allow-origin error:

"Access to Font at 'https://app.ungdrive.se/_css/fonts/udr.woff' from origin 'https://podio.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://podio.com' is therefore not allowed access."

However, the curl-response is:

content-type: application/font-woff
content-length: 28312
last-modified: Fri, 01 Jun 2018 09:52:23 GMT
etag: "6e98-56d918a6343c0"
accept-ranges: bytes
access-control-allow-origin: *

My CSS:

@font-face {
font-family: "udb";
  src: local("udb"), url(https://app.ungdrive.se/_css/fonts/udb.eot);
  src: url(https://app.ungdrive.se/_css/fonts/udb.eot?#iefix) format("embedded-opentype"), url(https://app.ungdrive.se/_css/fonts/udb.woff) format("woff"), url(https://app.ungdrive.se/_css/fonts/udb.ttf) format("truetype"), url(https://app.ungdrive.se/_css/fonts/udb.svg#udb) format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

I'm starting to wonder if this is something on your side, or what I'm missing here.
0

Comment actions Permalink

Please sign in to leave a comment.

Comments

Didn't find what you were looking for?