Hosting custom fonts

Configure loading webfonts for use in a form.

If you have font files that you are already hosting somewhere else (like Amazon S3), you can use them in your flows.

CORS

Since Formsort will load the fonts from the responder's browser, which is not the same origin as your font will be hosted on, you must configure Cross-Origin Resource Sharing (CORS) headers on the server hosting the fonts. You must permit access from the Formsort flow origin, or any custom domains that you are hosting Formsort on directly.

S3

For S3, a compatible CORS policy would look like the following.

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://flow.formsort.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
    <CORSRule>
    <AllowedOrigin>https://studio.formsort.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>https://{{YOUR_DOMAIN_HOSTING_FORMSORT}}.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

You could also just have a single <CORSRule>with a <AllowedOrigin>*</AllowedOrigin> if you'd like to allow all origins. Read more about CORS on S3.

To verify your CORS configuration, you can use the following curl statement.

curl -H "Origin: https://flow.formsort.com" -s -D - -o /dev/null  https://{YOUR_BUCKET}.amazonaws.com/{YOUR_PATH}.otf | grep Access-Control-Allow-Origin

If correctly configured, the result of the above command should be:

Access-Control-Allow-Origin: https://flow.formsort.com

Uploading custom fonts to Formsort

The custom fonts menu can be found in the Theme tab -> Typography ->Add font family... -> Custom Fonts

Any fonts you upload will be stored in your s3 bucket, and Formsort will pull from your s3 bucket.

Once you're in the Custom Fonts menu, add the font family name,

Add Font family name

then upload the font files,

Upload font file

and finally map the font weights.

Selecting font weight mapping

And then you're done!

Multiple font files can be added at the same time.