Alternate character sets / Google font

[jsperron (Jean-Sébastien Perron)]

Hello everyone,

I am trying to inject some CSS code in Rapid Weaver for alternate character sets. I work with Google font « Jost ».

It is said that Jost ships out-of-the-box with a double-storey “a”. To get the full Futura feel, we need to use the single-storey “a” alternate character with font-feature-settings: “ss01” 1 ;

I have not had any success with the following CSS code that I injected in my page :
.element {
font-feature-settings: “ss01” 1 ;
}

I know my problem is not related to Foundry, but I would be grateful if someone could propose a solution.

Thank you !

[teefers (Doug Bennett)]

Perhaps a URL to at least a test page would help you get help.

Also if you can provide us a link to where you got the CSS you are using

.element {
font-feature-settings: “ss01” 1 ;
}

If that’s the exact code you are using, you would need to have an element (paragraph, h1, h2, etc, ) with a class name of element.

[jsperron (Jean-Sébastien Perron)]

Thanks Doug. I got the CSS on the website of the developer (Google Font Jost) :

In-Depth Guide to the Best Free Fonts

I am not an expert in html, but I can inject some code in Foundry. I use Foundry + Stacks + RapidWeaver.

I would like to use the alternate character for the letter “a” on every pages of my site.

I will try to publish a “test page” by Friday.

[teefers (Doug Bennett)]

@jsperron

I got the CSS on the website of the developer (Google Font Jost) :

You’ll need to be more specific. Sorry I can’t take the time to go through an entire site looking for the code snippet you are using.

@jsperron

will try to publish a “test page” by Friday.

When you have a test page add it here, that will make getting what you want easier.

[jsperron (Jean-Sébastien Perron)]

Here is my page:

Photographie d'art | Studios Drakkar

I am afraid, but the only information available on the developer page is :
Alternate Glyph Forms
font-feature-settings: ‘ss01’;

If you have any idea how and where to inject this code into RW, I would be so pleased. Thanks.

[teefers (Doug Bennett)]

I just ran a quick test and the font-feature-settings: ‘ss01’; doesn’t work(at lest with the Jost I down loaded from Google. The “ss01” ccomes back with an Invaild Property Value error.

[jsperron (Jean-Sébastien Perron)]

Thanks for testing. I am going to contact the developer.

[teefers (Doug Bennett)]

@jsperron,

I just tried another test and did get it to work(I think).

For some reason it didn’t like it with the “1” or with nothing, but did work with this:```.

.myclass {
	font-feature-settings: "ss01" on;
}

The ‘1’ should have worked.

I don’t have a clue as to what the “Alternate Glyph Forms” should look like, they looked the same to me.

but what you need to do is define the element you want.

Right now on your site you look to be using Foundry typeface to set the jost

.foundry-typeface-one {
	font-feature-settings: "ss01" on;
}

That should set the feature set for everything you have using the typeface 1 on.

[jsperron (Jean-Sébastien Perron)]

Thanks. For me, they looked the same to me. It is weird.

[teefers (Doug Bennett)]

Yeah,
Not sure what is happening internally with the font, but the font-feature-settingsis showing in developer tools as being applied.

[jsperron (Jean-Sébastien Perron)]

Doug, are you sure it is .foundry-typeface-one ? Can it be written differently ?

.foundry-typeface-one {
font-feature-settings: “ss01” 1;
}

[teefers (Doug Bennett)]

The cCSS generated by your site that sets the font to Jost:

What I inserted:

.foundry-typeface-one {
    font-feature-settings: "ss01" on;
}

What Foundry Genrated:

.foundry-typeface-one {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
}

[jsperron (Jean-Sébastien Perron)]

Doug, it is fine, thanks. I have not got much success in creating a self-hosted font Jost. It seems that it is difficult to access alternate character sets. Do you have any idea how to validate that ?

Furthermore, I am going to test some html code for the alternate character “a” (unicode-range property in CSS ). Maybe using that site :
http://clagnut.com/sandbox/css3/

It seems that font-variant-alternates CSS property controls the usage of alternate glyphs. Do you know it ? Do you think it could help ?

[teefers (Doug Bennett)]

@jsperron

font-variant-alternates CSS property controls the usage of alternate glyphs.

I know nothing about that, but it doesn’t seem to have wide support for most browsers:

CSS font-variant-alternates | Can I use... Support tables for HTML5, CSS3, etc



I maybe not the right person for this, I only use web fonts (Google or others) rarely. I try to talk people out of using them. To me fonts are all about readability and not styling or decoration. Using less bandwidth and will loading faster to me is much more important than the “look” or “decoration” that a web font provides.

I could play around and get it to work With Foundry:


I download the Jost font from the link you gave above (GitHub).

The file only contains TTF (TrueType) and OTF (OpenType) formats not the needed WOFF (Web Open Font Format).

If you watch Adams (@Elixir) video on self hosted fonts you he shows you how simple it is to convert with FontSquirrel.

In the folder you can download (Jost-master) there is a sub folder called fonts, the only file I could get to work is with font-feature-settings is the folder called Jost-VF.ttf (it’s in the main fonts folder not the sub folders (ttf, otf).

Not being a web font user my guess is that the “VF” stands for Variable Font.

Once I got the one font converted to WOFF, I copied the font to resources and set the Typeface stack with a Self hosted like Adam’s video shows. I point multiple font wieghts (normal and Italic) to that same single Resource. That seems to work.

Now the custom CSS comes in.:

`.foundry-typeface-ten {
 font-feature-settings: “ss01” on;
}

In this test I set it to Typeface 10. You can use what you want the Foundry CSS seems to follow that naming conversion Selecting Typeface 10 will create a CSS class name of .foundry-typeface-ten, Typeface 11 will use .foundry-typeface-eleven.



Hope this helps, I’m no font expert, but could get it to work, There are plenty of people that are font guru’s that might help you out.

[jsperron (Jean-Sébastien Perron)]

Thank you very much, Doug. I am please it did work out for you. Unfortunately, it does not work for me. I managed to get he file “Jost-VF.ttf” on GitHub. I converted it in Font Squirrel Generator. I imported “jost-vf-webfont.woff” to my resources in Foundry. I then created a Self-Hosted Font in Typeface and set assigned it to Typeface 1. I then inserted the following code in my page in CSS (under html code). Is it the right place to inject the code? I tried other places, but it did not work. Here is my page : Studios Drakkar | Photographie d'art

Maybe there is corruption on my Mac with the cache, I don’t know what to do next.

[teefers (Doug Bennett)]

@jsperron

I then inserted the following code in my page in CSS (under html code).

Okay, I can’t see the code you put into the post. You need to mark stuff like that as preformatted text in posts on the forum or it doesn’t show up.

The CSS code I gave above belongs in the CSS code tab, not the HTML tab. You can do this in the page inspector (right side) on a page-by-page basis or in the settings area (left side) for sitewide.

I’m not near a real computer(on an iPad, they don’t support tools) so I can’t check the live site right now.

[jsperron (Jean-Sébastien Perron)]

Doug, I managed to do it. My problem was with Font Squirrel. By default, conversion is set to Optimal. I set it to Basic and I then got a functional .woff file. Thanks so much for helping. Not bad for a “non font expert”.