Get font from CMS and use it on the page

Design help Custom code
1

Hello, I’m building a website for a small type foundry, basically, there will be an overview of all the available typefaces and I will make a collection to show each font.

I’d like that each font page will use that specific font and I also want to make a scalable system so that my client can freely add new fonts in the future and these will be applied on the page.

How can make the page use a font which is loaded in the collection as a file field?

Thanks

2

Might be possible, it would be easier to tell if you build this page first and share it, with both the readonly project link and the published site link.

You could use some custom code to clean this up but in a crude way what you’re needing is probably these 3 things-

  • The font file URL
  • The font file format e.g. woff
  • The font family name

With those 3 fields populated, you can probably use them in an HTML embed to create something like;

<style>
@font-face {
    font-family: 'MyCustomFont';
    src: url('https://.../MyCustomFont.woff') format('woff');
}
.demo-content {
    font-family: 'MyCustomFont', sans-serif; 
}
</style>

You may need to use !important in your CSS rules to override your Webflow CSS-stored styles, depending on how you setup your .demo-content area.

1 Like
3

Thanks for the reply, I was indeed thinking that the best way would be to use an URL for the font and apply it with custom HTML.
However, I noticed that is not possible to add fonts as file type in the Collection file field and also when you upload fonts on the project settings is not possible to get the URL of them.
So how can I get that font URL? which ways would you recommend?

4

If the Webflow file field won’t allow you to upload a font file then your best option is to host the files elsewhere, and just have a URL field in the CMS reference them.

5

Do you know any free hosting space I could use for fonts?
or do you know a way the get URLs of font uploaded in webflow?

6

Free? If you don’t change your fonts list often, Netlify is a good choice, you deploy files there from Github or ZIP file upload.

IIRC, for files you can upload into the field, you just bind them to a link element. Then your scrips can see the URL in the link element.