[SOLVED] Labels getting cut off in all browsers

Answered
0
0

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

  • You must to post comments
Best Answer
0
0

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

  • Luca (ITG)
    To clarify, if you use the theme for the fonts in Wisej you don’t need the @font-face rule in your css.
  • You must to post comments
Good Answer
0
0

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

  • You must to post comments
0
0

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!

Attachment
  • Luca (ITG)
    if you don’t have the woff you can’t use montserrat in the browser unless it’s installed on the client machine. I tried it on my machine with montserrat installed and it works well. But if you try with a device without montserrat it will be off – unless it’s added to the browser using the woff or woff2.
  • Ivan Borges
    Thank you Luca. Got the idea. Will see what I can do from my side. Cheers!
  • You must to post comments
0
0

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.

  • Luca (ITG)
    Can you attach a zip with the font (including the ttf and woff files) and the text that is getting truncated?
  • You must to post comments
0
0

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

  • Ivan Borges
    And by the way, regarding your first question, I am editing the Theme with the Wisej Theme Builder and then changing the font family for each type offered in the Fonts node.
  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.