We have our own company font which I would like to add to Webflow. At the moment it looks like I can only use google fonts and typekit. Is there a way of embedding them or will it be possible to add them soon?
1 Like
+1
I was wondering about this as well (asked this couple of days ago here). I use fonts from Fonts.com and Cloud.typography. Would be great to have these included.
Hi, you can do this, but you need to have those font files stored on your own file storage, i.e. amazon s3, rackspace cdn or your own file server. These fonts that you have can be specified using the @fontface css styling which allow you load your own webfonts by including a link to the css containing your @Fontface styles. The link to the css file should be put in the Head section of the custom code panel in site settings.
You can also link to third party online web-based font repositories, if you have the link to those styles and they can be publically accessed via the css stylesheet.
Hope that helps…
p.s. check out www.fontsquirrel.com and check out the web font generator… there you can convert any of your non-web fonts to web font (they do ask if you have legal right to use font, but do not prevent you from making a web font from a normal desktop font).
1 Like
We’re waiting from fonts.com to provide more information on how best to integrate their font library into Webflow. They aren’t very well suited to work with tools just Webflow at the moment.
Other providers are out there, but we’re leaning to letting you upload your own fonts to give you ultimate design flexibility. I’ll create a poll and see what people are looking for.
3 Likes
Hopefully webflow will start knocking the various external font providers, including user-custom, off their list soon. In the meanwhile, I use a custom icon font for some symbols, with the drawback being that you can’t see them in edit mode, only when the page is rendered.
Edit mode:
Rendered:
…not the most graceful solution, and obviously not going to help your designers get a feel for the page while working on it if you are using a full alpha font in text. But in the meanwhile, helping for symbols/icons.
Implemented with standard @font-face custom code:
