Hello.

Im trying to understand why I am having some font issues while using typography.com fonts. 

I am using to fonts that read from typography.com by setting them as custom fonts. Fonts style sheet: https://cloud.typography.com/66956/798386/css/fonts.css

and fonts IDLEWILD & GOTHAM. Both fonts have two selectors, font-family: "Idlewild A", "Idlewild B"; & font-family: "Gotham SSm A", "Gotham SSm B"; but I can just add one on the typography functionality making the font look strange on the mobile view. 

I also have imported the font files to: https://mfchawaii.com/wp-content/themes/fonts

but I am not certain how to solve the viewing issue or configure it correctly with your single Font Family Name option.

Could you please advise?

On my own research to find a solution to this I have found several instances that explain that cloud typography needs to use the two selectors for each font "Idlewild A", "Idlewild B"; as 

Incase anyone is still interested in the solution. You have to include both Font names in your CSS.
For example:
font-family: 'Chronicle Display A', 'Chronicle Display B';
The character sets are split across A and B. No idea why but using both solves this problem.

I added specifications by custom css such as: 

p {
   font-family: "Gotham SSm A", "Gotham SSm B"; 
   font-weight: 400;
   font-style:  normal;
}

h1 {
   font-family: "Idlewild A", "Idlewild B"; 
   font-weight: 400;
   font-style:  normal;
}

h2 {
   font-family: "Gotham SSm A", "Gotham SSm B"; 
   font-weight: 800;
   font-style:  normal;
}

and that seems to have solve my issue somehow. 

I think I found a Side solution, yes. 

thank you

Actually Maybe I can use your help

I just was notified of a view issue on chrome.

Did you happen to go in and check, by any chance?

Please view main menu or footer on chrome, brave or Firefox,

it does not look like in Safari. Font is wonky, probably because I haven't specified each of them on the Custom CSS  as did with .p, .h1, .h2....

Ylli,

the issue is the cloud typography needs to use the two selectors for each font "Idlewild A", "Idlewild B"; and your example and your system only allows for one. 

 Both fonts have two selectors, font-family: "Idlewild A", "Idlewild B"; & font-family: "Gotham SSm A", "Gotham SSm B"; but I can just add one on the typography functionality making the font look strange on the mobile view. 

Thanks.

There are two things I'd like to share.

1. typography.com / cloud typography is one of the most advanced and prestigious font providers on the typography world. Extremely high end for custom fonts, withe a deep knowledge on both technical and visual aspects of fonts. With this, and since this has been an issue of mine for years at using both their service and your theme, I want to really encourage and reinforce the need of updating that as a solution for your theme. I believe Kalium to be (my) the best theme, and typography.com the best fonts, and believe they need to work together. 

2. Yes. Adding the selectors to the custom css fixes the issue, as shown below on this thread, but, there are so many parameters and selectors for the theme, that I don't seem to know them all, specially due to my lack of training with proper code. For this, I would like to know if you have a solution or cheat sheet on how those are needed to be specified. Obvious p, h1, h2 etc are easy, but I seem to have difficulty with the footer, top bar, mobile menu, etc. Do you have any advise that can help...

thank you.

Hi Arlind,

Fantastic. Thank you so much.

Totally did it.

Will you be adding this fix to the next theme update? knowing will help me understand if I apply same change to other sites that have the same typography functionalities or connectivities with cloud.typography. thank you

I really appreciate your help. Thanks again,

Giovanni