Hi,
I have included all glyphs in my API font export but. Any idea how I
can access my SmallCaps?
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Small caps is an value of the font-variant CSS property and isn’t yet supported by Webflow but you can add it as a custom code and see its effects right in the designer.
Add a custom code element inside of your navbar symbol for example, so that it’s available on you whole site and the CSS effects of it are visible within the designer. Then add this custom code
<style>
.smallcaps {font-variant: small-caps}
</style>
Now add the class smallcaps in the designer to any of the text elements you want to see styled this way.
@vincent, thanks so much for your quick response.
I don’t quite get this part though:
“Add a custom code element inside of your navbar symbol for example…”
Can you elaborate, please? You’re speaking to a designer, not a coder.
Thanks!
Here’s what I did…
Don’t see any changes or access points yet…
No problem. That sentence contains a lot of specific and important infos.
1. custom code and Webflow
In Webflow you can add custom code: HTML, Javascript and CSS custom code. Here we’re going to add CSS custom code to add a styling feature that Webflow doesn’t yet handle.
In Webflow you can add custom code at various places: in the Site’s settings Custom code tab (we’re not going to use this one), in the Pages settings Custom code zone (we’re not going to use that), right in the page, in the designer canvas, using the Custom Code Embed Component (We’re using that)
http://vincent.polenordstudio.fr/snap/5r4p0.jpg
We’re using this one because it’s super convenient: any CSS code you add to a page with this Component will work right away in the designer: you will see your small caps right away. (With the other methods, you’ll have to publish the site prior to see the effects)
So you drag the Embed component in the page (it’s invisible anyway) and you add the custom code in it.
http://vincent.polenordstudio.fr/snap/12li0.jpg
2. placing the Embed component inside of the Navbar symbol
Here I assume you’re using a SYMBOL for your navbar. A symbol means you turn any element into a Symbol and reuse it all over your site. Typically everyone does that with navbars. So that any change of style and link and content you make inside the symbol reflects to all the pages where the symbol is.
So by placing the Embed component inside of your navbar symbol, well, makes the CSS code we just added available on all the pages of your site. Convenient!
To make your navbar a symbol, you select the navbar and click the + button on the right of the designer and Symbol and Create a Symbol (or cmd+shift+A) . It turns green, meaning it’s a symbol. You can edit a symbol by double clicking it. I’ll let you go on the Help part of Webflow to learn more about symbols, it’s important, ok?
3. adding a class to an element
In our custom code we defined a class with the small caps property. Now any element that we add this class to will get the property.
You add classes there:
http://vincent.polenordstudio.fr/snap/z8b4j.jpg
The class can be added anywhere. It can be the only class or a combo class (one after other classes)
Like this:
http://vincent.polenordstudio.fr/snap/4d54p.jpg
Or like this:
@vincent, your effort is much appreciated.
Doing what you advise right now.
Will give feedback soon…
1 Like
@vincent ,it worked!
Much appreciated!
Now, how do I access the alternate letters in the glyphs?
Thanks so much!
That I wouldn’t know… Smallcaps works for everything even if you don’t add special glyphs.
What special glyphs are you talking about?
So for instance, if I want a trademark symbol, accents, superscripts, ligatures, numbers, et al to letters like below:
I tested this by copy and pasting a sentence with alternate ligatures—with the exact same font on my desktop and imported into Webflow—from my work files but it didn’t come through (properly).
Ok, fonts aren’t an easy thing on the web. Various formats for various platforms. When converted for web use, maybe all glyphs aren’t included. What formats did you import? How did you convert your desktop fonts to web fonts?
As far as I remember, I’ve never seen things such as alternative characters and ligatures used with web fonts. I’m not saying that’s not possible, I’ve just never seen it personally.
I use such fonts on desktop, mainly in Illustrator, but that requires Illustrator to handle a series of fonts as one unique font, and propose for each character the alternative glyphs. This isn’t a feature that’s supported by web fonts.
If you’re only going to use this at a small number of places, you’re maybe better off not using web fonts but images (such as SVG) for that.
You can search on google for “ligatures and alternative fonts for the web”
Correct.
I’ve noticed that specific font styling is almost unheard of on the web although there are designers who are very particular about their font use and therefore you see this detail on their website.
I’m using the Typekit service to handle my fonts. They have specifically dedicated “web kit” for web functionality. In there one is able to add glyphs and languages.
Yes, assessing my design, I will use this in a very small percentage. I will, however, use proportional old style figures within paragraphs as it matches the lowercase and small caps letters.
So as for the specific alternates, I may have to think about workarounds like the ones you suggested but for the old style figures, I may have to research more.
Thanks for the links, will check it out.
Once again, many thanks!
Checked the links. Very useful information.
So I can code the following in the same way I did with the smallcaps right?
salt: Stylistic Alternates. Enables alternate glyphs when only one set of alternates is included in the font.
ss01 to ss20: Stylistic Sets. Enables alternate characters according to the group specified by the typeface designer (1 to 20 are possible). Sometimes these sets include several stylisitically matching alternates, sometimes only one glyph. Please check the glyph overview for more information, or the type portrait on our blog. (See the three stylistic sets of Shift for instance)
calt: Contextual Alternates. Alternate shape for a character used in context of specific other characters nearby.
liga: Standard Ligatures. Typically fi and fl, often also ff, ffi, ffl. (See Trilby)
dlig: Discretionary Ligatures: Optional ligatures like st, et, Th. (See Big Moore)
clig: Contextual Ligatures. Ligatures used in context of specific other characters nearby, mostly in script fonts. (See Savanna)
onum: Oldstyle Numerals. Webtype offeres lining figures as the default numerals. Several typefaces include optional old style figures that fit more harmoniously into body copy. (See Planet)
tnum: Tabular Numerals. Numerals of uniform width, as opposed to proportional numerals, where the 1 for instance is more narrow. (See Helsinki)
smcp: Small Caps. Specifically designed small capital letters instead of lowercase. (See Farnham)
unic: Unicase. Lowercase forms enlarged to uppercase letter size. (See Hermes)
swsh: Swashes. Turn on to use a swash variant of a character (best used together with cswh).
cswh: Contextual Swashes. Swash letters used in context of specific other characters nearby.
zero: Slashed Zero. Useful where the 0 could be confused with an O. (See Helsinki)
sups: Superscript. Specifically drawn superscript numerals. (Not to be confused and not to be use together with the HTML superscript tag.)
subs: Subscript. Specifically drawn subscript numerals.
Quaasim I have to confess I haven’t put much thought on ligatures and alternate glyphs for the web.
I love to work on typography, and I love to work on lettering, but I never considered lettering for the web. I don’t think it’s super appropriate.
But if CSS and web fonts makes it possible, I may explore it and try it for myself.
I’ve written a piece on how to use multi layered fonts, that could interest you: http://inb4.webflow.io/posts/designing-with-multilayered-fonts-in-webflow
I’ve seen your identity work on Behance, it’s of quality. I understand you’d like to bring that level of refinement to the web. It will take you to understand web concepts and CSS better. So don’t hesitate to read all the Webflow documentation you can and don’t be afraid to learn more about all the web concepts, it’s important for what you want to achieve.
Thanks @vincent!
You have helped me and steered me in the right direction Alhamdulillah. I am grateful for that.
Through this thread insh’ Allah others can benefit. At least it’s a learning curve in the right direction.
I have “limbed” my way to what I believe is at least a temp solution (for TypeKit users):
So below is the first checkpoint. By clicking on the Open Features help icon, you re able to see what features/glyphs ship with your kit.
Then, with this knowledge, you check how this need to work in the code:
https://helpx.adobe.com/typekit/using/use-open-type-features.html
Now, I’m not a coder but I have tested the solutions they provide and the code you provided
and synthesized the two. I tested it a few times with no success. Then I did this:
So following the same method you gave me, I replaced the old one (smallcaps only one)
and replaced it with the full blown one. Sometimes tells me that it could be coded better
(I tried but not a coder) but I think this solution ended up working because the glyphs that
are needed are now present, including the old numerals Alhamdulillah.
I then created the following classes:
So far it appears to me that the common ligatures and oldstyle numerals come with the
small caps. I have no idea if and how all this will eventually pan out in the end (in which case
I will revert back to this thread insh’Allah) but for now I think I have what I need. In later pages
I will need the superscripts. I just saved the classes so I know they’re there.
As for your suggestion to code, well, this is why I’m using a drag and drop service so I can solely focus on design (no?) but I hear what you’re saying.
Thanks
By following this code, I am able to get kerning too. The way I see it, all it really
does is toggling (with kerning on) between “optical” and “metrics.” So no manual
kerning.
Here’s the code:
.kern {font-kerning: normal}Here’s the class:
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.