Adding additional web fonts

@ramatsu, I’m skeptical that choosing Helvetica Neue in Webflow would hook up to the fonts.com version, because the font-family would have to be something like "HelveticaNeueW02-UltLt" for that to hook up correctly. Though I could be wrong, and the browser might be a doing some sort of fuzzy matching.

Right now, I’m experimenting with a way for you to manually type in a font-family value so that you can set it even before we add Fonts.com integration (no ETA on that yet, unfortunately).

Thanks @callmevlad ! If css in the custom code section overrides the webflow css sheet, perhaps that could be a workaround in the interim that doesn’t create maintenance issues. I’ll give that a try later, unless you know it wouldn’t be fruitful.

Hi @callmevlad, it does work to override the font-family from the webflow-generated css with styles in the custom code, so that’s a workaround until you get fonts.com support built in. I should have thought to try that earlier, just too reluctant to bail out of having design panel control.

It’s workable because it doesn’t have to be re-created with each export, so maintenance isn’t impacted unless new classes are added or the font-face needs to change from one of the existing classes that uses it, which won’t be very often. (On the other hand, a year from now when one of those cases occurs, I’m sure I won’t remember the workaround and will be baffled by why I’m getting the fonts I’m getting, so real fonts.com support will be a welcome thing!)

1 Like

Hi @callmevlad, the workaround above was ok for a site where I just had a couple of classes using a fonts.com font. But I’m finding it’s not that much help when trying to do a site largely based on one, so please let me give a +1 (or a +10 if possible) for getting fonts.com integration on the roadmap and moved up the priority list! The lack of a real Helvetica is extremely frustrating, and they seem to be the only source!

1 Like

Hi @callmevlad, any possibilities on your experiment with manually typing in a font-family value? I’m really struggling with the amount of work involved in the current way you have to get fonts.com fonts hooked up in a site with a lot of classes.

Hello there,
like @blueocto I tried to add “PT Sans” to my project,
but in the web font - google font selector dropdown I can only find:
“PT Mono”, “PT Sans Caption”, “PT Sans Narrow”, “PT Serif Caption”

How can I use in Webflow the “PT Sans” font? I just can’t find it in the list

(I mean this one:

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

)

Just chiming in, PT Sans is already in the populated list in Webflow by default.

Doh!!! you’re right!! I missed that it was “active” by default! Thank you @DFink !

Fonts.com will be much more useful for me too. They have richer database than typekit

2 Likes

We’re looking into it. Thanks for the suggestion!

1 Like

could you add the http://webfont.ru/? This is webfont-tool like Google Fonts contains 420 free fonts with cyrillic

Hey Webflow team,

I would love to see font face / fonts.com integration, although typekit is a great start it’s very limiting. The app is awesome and will be great for me to test out my designs and preview for clients but I can’t use it for client work until the typography features are enhanced.

Thanks

3 Likes

Hey Vlad,

Doesn’t look like the custom font implementation is coming through to the published site.

  1. upload ttf to fonts section in settings
  2. create page and assign font, and can see font inside webflow
  3. publish and preview in browser. no font shown in browser or source code

Also i tried to upload, Woff, and although the screen shows it uploaded, each time you refresh the page, it shows only the ttf. I’m attempting to upload the full set of ttf, woff, svg, eot so it works cross browser, UNLESS you guys are doing the processing of this on your end?

@callmevlad, is there some more info on how to use the beta custom fonts? I uploaded 3 flavors (woff, et al) of one, but don’t see any confirmation that they’ve been uploaded - nothing shows up in the Add Custom Fonts area of the dashboard the way they do in the Google font area, and even after refreshing the designer mode view, I’m not seeing it in my fonts menu… I’ve only tried the one so far, but it seems to work ok as linked through custom code, so I believe it’s a valid font file.

Hm… I also seem to be hung on the Typekit portion of that page. Going to log that as a bug separately.

Ok, I’m now able to load those custom fonts, and am able to see them in the picker, editor, and published site. However, some questions on how it’s supposed to operate regarding the different formats. This is a topic I’m pretty new to.

  1. Should an .otf or .ttf font uploaded here work in all browsers? My .ttf is showing up in Mac Safari and Chrome, but not Mac Firefox, where I get a sans default. Also working in Win Safari and Chrome, but not IE (11) or Firefox.
  2. I tried .wof file as well, same results.
  3. When both the .ttf and .wof are loaded, they show up as separate fonts in the picker. So if different formats are needed for different browsers, not clear on how that should work.

Really glad you guys are working on this, I’m happy to test anything you need looked at. How are you handling the licensing questions around people uploading fonts, btw?

Hi, regarding the level of support with different font files: the .woff format is supported by all modern browsers including Internet Explorer from version 9 onwards. Opentype fonts (I.e. .ttf and .otf formats) are supported by most browsers but support on IE is limited and will work only with fonts that have been marked with “installable” permissions by the author.

@kenneth - Thanks, it’s surprisingly hard to find a concise compatibility statement like that.

Right now it looks like Firefox is not honoring the woff font I posted, but that could be caused by cacheing issues created by adding two fonts with identical names into a beta feature, or by FontSquirrel’s .woff format, I suppose. But more likely the first, I’ll test it when I’m confident my .ttf version is really out of the system.