Post

7 followers Follow
0
Avatar

Any way to use a custom font in the webform?

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!

Alicia St Rose

Please sign in to leave a comment.

13 comments

0
Avatar

What's the exact lines of CSS you are using in your webform?

Andreas Haugstrup Pedersen 0 votes
0
Avatar

I'm trying to use:

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

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

Alicia St Rose 0 votes
0
Avatar

You must have more css than that one line. What does you @font-face rules look like?

Andreas Haugstrup Pedersen 0 votes
0
Avatar

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.

Alicia St Rose 0 votes
0
Avatar

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).

Andreas Haugstrup Pedersen 0 votes
0
Avatar

Hi Andreas, please can you give an example of using absolute URLs for a custom font in the CSS?

Matt Clifton 0 votes
0
Avatar

Use URLs that begin with http:// ? I'm not sure I understand your question.

Andreas Haugstrup Pedersen 0 votes
0
Avatar

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.

Matt Clifton 0 votes
0
Avatar

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;
}
Andreas Haugstrup Pedersen 0 votes
0
Avatar

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

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.

Stefan Falkboman 0 votes