Hi.
We have set our Themes Fonts to [“montserrat”, “open sans”, “verdana”, “helvetica”, “arial”, “sans-serif”], which looks great.
However, we have noticed that with Montserrat some of our labels get cut off on the right when it is set to auto-size. I have found here in the forum the Style to add to the Default.html:
@-moz-document url-prefix() {
div {
letter-spacing: -0.03em;
}
}
This did fix them when I run in my development machine, but still have the same issue once I deploy it to the production server and run it from there. I have refreshed, cleared cookies, restarted the website and recycled the Application Pool . I have attached the pictures, first one from the designer, the second from the browser.
Is there something I should take care of to make it work from the production server IIS?
Thanks in advance.
Ivan
When you use a non-standard font in the browser you have to install the font in the browser using CSS using the @font-face rule:
https://www.w3schools.com/css/css3_fonts.asp.
This is the list of safe fonts:
https://www.w3schools.com/cssref/css_websafe_fonts.asp
With Wisej you can embed the font in the theme, or add a reference to the font woff or woff2 files.
That will only install the font in the client browser. If you use AutoSize the autosizing is done on the server and if your server doesn’t have the font installed it will use an approximation of the font. So if you use a non-standard font like Montserrat the autosizing will be probably wrong unless you install the font on the server. The font must be a ttf file.
The browser will choose the font the way you listed them and will fallback if not available on the client browser. It has nothing to do with the server trying to measure a text using the wrong font.
Adding css that changes the letter spacing or any other browser feature will not change the auto sizing, it will make it less accurate. In that case you have to turn off autosizing.
HTH
Hi Ivan,
How are you attaching the font to the theme? The font also needs to be installed on the production machine if it isn’t already. This is in addition to referencing the theme in Google Fonts or including the base64 data.
It sounds like it might already be installed on your development machine and that’s why it’s rendering correctly.
Let me know!
Best regards,
Levie
Hi Luca.
Here is the zip with the font, but I only have the TTF files, not woff ones.
As for the text, you can see in my original post, there are two pictures with what was expected and what was shown.
Thank you for looking at this!
Hi Luca.
Thank you so much for all the information and sorry for the amount of stupid questions, it is just that I have so many of them…
OK, I had the font (will probably give up on it) installed on my own dev computer and without the letter-spacing modification it was being cut-off. So I found someone here on the forum with similar problems and used the same solution they applied. That fixed the issue on my dev machine. If I get you correctly, I shouldn’t really use this fix, is that so?
Now, how can I embed the font in the Theme? And yes, they are all TTF files and are installed on the server.
Also, when you mean “use the theme for the fonts in Wisej”, you mean setting its name it like I did through the Theme Builder?
In the end, if setting AutoSize to false fix the thing, I could go this way too, I guess.
Hi Levie.
Thanks for the prompt reply!
I checked the server, and no, the font wasn’t present there. Not sure how this works, since the font shown in the browser when I navigate to the production server is correct, just cut off. I guess it shouldn’t even show the chosen font and use another in the line of the ones offered in the Theme. Anyway, I installed the Montserrat font in the server, but it didn’t seem to help. Still having the end of the labels cut off.
Now, regarding referencing the theme in Goggle Fonts, I have no clue what that is, will research in the web. However, I am navigating to the production app from the same browser in the same machine where I navigate to development version.
If you have any other idea, let me know. 🙂
Cheers.
Ivan
Please login first to submit.