Font in mobile browsers

Question

HelloI have a blazor server app that displays word documents.  On desktop browsers the font of the word document displays a font the same as that with which the document was created (Calibri)...or at least very similar. My design is responsive and on a mobile browser it displays in something like Times New Roman font. I want the cleaner font of the desktop on the mobile.  Clearly a styling issue, but I'm struggling to track it down. Can you point me in the right direction.  I am using Material design, with a theme studio override.Thank you

Balamurugan Shanmugam · Answer

Hi Ditchford,The Syncfusion Document Editor displays the text by drawing it on canvas. As per the default behavior of canvas rendering, if the font resource doesn't exist in the current environment, it will render the default font of Times New Roman. So, in order to overcome the issue, either you need to install the font resource in your environment or you need to embed the font in the webpage.Regards,Balamurugan S

Ditchford · Answer

Hey BalamuruganI've tried google fonts in my layout.cshtml:    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">The word document still displays in Times New Roman on a mobile device.  I think I need a more detailed explanation.Thank you.

Balamurugan Shanmugam · Answer

Hi Ditchford,Currently, we are preparing the sample for better clarification of this embedded font. We will share details on March 12, 2024.Regards,Balamurugan S

Balamurugan Shanmugam · Answer

Ditchford, On further analysis, you can embed the fontface in a style tag instead of adding a font in link tag, like below.

Ditchford · Answer

HelloThank you.  I have added the above to the razor page that displays my document. The mobile browser still displays Times New Roman. The script seems to have no effect on mobile or indeed desktop.Sorry, but I am going to need a very clear description of EXACTLY where this style block should be placed to override all other fonts on a mobile browser. I can change the font of everything except the word document itself, which appears to default to a font from the 1980s :-).Thank you.

Balamurugan Shanmugam · Answer

Hi Ditchford,Based on the information, we attempted to recreate the issue by using the below Azure-hosted sample. But we didn't encounter the issue in both the mobile browser and Destkop. We have attached the video for your reference.Azure Hosted sample - https://blazorserverapp20240311195321.azurewebsites.net/Note: This hosted sample is only for testing purposes and will be active in a few days.Could you please check the above-mentioned hosted sample on your end?Regards,Balamurugan SAttachment: SampleAndVideo_cadbdcdd.zip

Ditchford · Answer

Hey BalamuruganThank you.  Your sample works as expected. Note, however, that I only have font issues on an actual mobile browser. If I shrink a desktop browser to phone size (as in your video) then the font behaves.I have tried your sample on my phone and it works as expected.No matter what I do, the fonts display in Times New Roman on my phone.  I am at a total loss.I note that in your sample you are not using the embedded fonts as you originally suggested.  Is this something I could try...could you explain exactly where the embedded font would go as I need to be absolutely sure I am placing the font in the correct file/location.Thank you.

Balamurugan Shanmugam · Answer

Hi Ditchford,In the attached sample, we have added a font face to the rendering page of the host.cshtml file, as shown below.You can add the same to your application. If the issue still persists in your application, could you please share the sample used on your end or modify the attached sample? It could be helpful to reproduce the reported issue on our end. Thereby, we will analyze further and provide you with the appropriate solution at the earliest.Regards,Balamurugan SAttachment: Blazor_Server_App_(10)_68e768bc.zip