Ive purchased a font family that has 3 different styles to it. When im in Illustrator I can easly select a letter and change it to the Alt Style that I want to use. Now im taking my design and building it in weblfow. How do you select / change letters or whole groups of text to use an alt style within your font family?
@skywardeye8 what you can do is double click to edit the text highlight the text you want to change, and when the small menu pops up you can choose to wrap it in a span and change the text style of that span.
Here is a screenshot for context.
How would I convert or export the font families alt styles? right now I have one font file for the font family. that file has the alt style versions built into it. when Im in illustrator I get the option to change to a diferent style. Ive uploaded the font file to webflow. Ive done what youve suggested, which is great! I still dont have the option to choose the alt style within the same font family im currently using. Unless im over looking the option.
So do I need to somehow export multiple versions of my font family to upload to webflow? And if the answer is yes, how would I do that?
I believe for variations of fonts you would need a file associated with that variation. The provider that you got the font from should have a download option for multiple styles. Try going to the site you downloaded the font from to see if they do. Let me know how it pans out. @skywardeye8
So far I cant figure it out. The font im using is Kobe by Vj-Type. Its a really awesome font with alt letter options. They do not supply multiple files for the different style options. He said its dependant on the program to access them. I reached out to webflow support and she suggested I look into adding some custom code to change the alt letters. Seems promising but code is beyond me at the moment. Whats interesting is when im on the VJ-type website they have it set up to where you can change and see the alt letters via the web, so i know its possible.
Currently there isn’t any ability to natively control stylistic alternative within the Designer so you’d need to rely on a bit of custom code. On the VJ-Type site they appear to be using a CSS rule called font-feature-settings to define the style:
I’m not too familiar with the process as I normally don’t use them but I’d be happy to see if I can get things working if you can provide a read-only link:
thank you for the help!
So it looks like the code they use on the website is the same code you’ll need to use—the following gives me alternates:
<style>
.YOUR-CLASS {
font-feature-settings: "ss01";
}
</style>
Just add a class to your text element using the Kobe font and then use the code above in an HTML Embed element on the page to see the changes in the Designer:
Let me know if you run into any problems!
1 Like