How do I use ligatures and additional characters from a font?

Design help Custom code
1

Hi guys.

I want to use a font where there are several variations of different letters.

How do I use ligatures and extra characters from the font. And I don’t quite understand how I’m going to enter them. Can you explain them to me?

Here’s an example of a font: Le Murmure - VTF

2

hi @FlowKeeper Im not deeply in this topic but I have done short how to video and broad overview of this topic.

Hope it will solve your request

1 Like
3

Wow! Now I know where to start. I’ll try to reproduce. Thank you so much!

1 Like
4

What kind of software is this? With which do you view ligatures and symbols?

image

5
1 Like
6

hi @FlowKeeper do you have further questions related to your request?

1 Like
7

@Stan Hey,

Currently in the process of working on this project. I think some questions may come up a little later and then I’ll get back into this thread.

Thank you so much, you’ve helped me a lot!

8

Having seen your video explainer I’m still stuck. Webflow is still not showing my ligatures (and my woff font definitely has the required glyphs) - As I understand it, Webflow has ligatures on by default but they don’t seem to be working. Is there a way to force them

thanks

9

HI @zissou hard to help as I have my crystal ball in service. :laughing: Now seriously, It is not possible to give you any serious answer based on given informations.

What do you mean by this statement?
What Fonts?

The best way to get help is to follow this Guide

When posting please:

  1. Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the <your-site>.webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description of what you’re trying to achieve, and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this:
1 Like
11

apologies, what I meant was that Webflow supports ligatures by default.
Is there a specific setting within the webflow interface to turn say the fi to the ligature version where the f and i are connected

12

hi @zissou as far as i know I’m not aware that WF supports ligatures via font-feature-settings as they aren’t in UI Typography option

CleanShot 2022-09-23 at 14.16.07

to be able apply this feature you will need custom CSS.

here is article you can read more about how to but feel free to find more articles on internet.

Hope that will helps solve your question :wink:

3 Likes
13

Ah, that’s the code I was looking for!
Unfortunately, while it turns on the ligatures on other fonts, it still doesn’t seem to be recognizing my custom font’s ligatures. Is there anything I should be doing when exporting my woff to help Webflow or the CSS to recognize my ligatures

14

hi @zissou sorry I can’t help further as I’m not the font designer. As you have mentioned that your issue is related specifically to your custom fonts my guess will be to start looking for solution on websites related to font designers/creators.

15

yeah, It’s likely something to do with the woff export settings. Just thought someone here may have encountered the same issue

thanks for your help

16

Hi @zissou like I have mentioned I can’t guess where issue can be as you didn’t provide enough informations I have asked for in first reply to your request. What fonts?

I would like to mention again, the best way to get a comprehensive answer and possible solution to any request is to follow the posting request Guide I have posted.

Without providing detail informations It is like when you call to service “my car is broken how I can fix it” and ask for help without any further details. :wink:

EDIT: I do not know what convertor you are using but I have found something you can read as starting point and go from there.

1 Like
17

I’ve sorted it!
It was a combination of your font-feature-settings suggestion and my dumb mistake :slight_smile:
Thanks so much for your help

2 Likes
18

Hi @zissou Can you please explain how you fixed it so I can fiure out how to turn it on on a custom font too. PLEASE and thank you

19

Hello, I am using the custom font PP Editorial Old for my website. The .woff files include several ligatures that I am not appearing on Webflow. I’ve tried using the following as a custom property in the body with no success. Any suggestions on what can be done?

font-feature-settings: “liga1” on;
font-feature-settings: “liga” 1;
font-variant-ligatures: common-ligatures;
font-feature-settings: “liga”, “clig”;
font-feature-settings: “salt”;
font-feature-settings: “ss01”;