Font difference 
Author: Ian S.
Visited 1662,
Followers 3,
Shared 0
Hi,
I have created a website and set the font for both body text and the main menu to Myriad Web Pro. When viewed on my PC / Laptop and Tablet (android) it appears to be correct (see attached compare.png, left hand side). However, when my client views the website on an iPad or Apple Mac and other have viewed on Windows PCs the font on the menu is similar to Times Roman (see attached compare.png, right hand side).
The url for the website is www.talenttextiles.com
Please can you (a) explain why this happens and (b) how do I get around it?
Regards
Ian
Posted on the
I have a similar experience. I am using Tahoma which looks fine on my pc and my mac but looks more like Times New Roman when viewed on an iphone.
I have another project that remains consistent and this uses ariel.
Hello Ian,
If you use a font which is not present on all computer by default hen it will not be visible.
The only option to show this font on every device, also if this font is not installed, is to use the webfont version of it by adding the css code and the webfont file to the project.
Many thanks!
Author
Hi Claudio,
Thank you for your comment. Are there instructions in the help file or PDF manual for including a webfont by adding css code and the wenfont file.
If so could you point me in the right direction and if not give me some idea of how to do it.
I have temporarily solved the problem by setting the text display for the main menu to 'text as image with antialias' but feel that if the resolution of the user displaying this then the graphic may not be too clear.
I look forward to your reply.
Regards
Ian
Hello Ian,
You will need to get all types of webfonts files of the font you want to use (. eot, .woff, .ttf, .svg) so to be supported on all browsers and then you can follow the example here http://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts to add the correct code to load all files in the project. You need to upload these files and add the correct link to be found once online.
Once the files are correct linked and you selected the font in the font selection of the editor it will load the webfont file used by the browser used by the viewer.
As alternative there exists also the google webfonts which are free to use and can be added faster to the project:
https://developers.google.com/fonts/docs/getting_started
You select the font you want to use and then you copy the code to load the css file and you add it to your project in step 1 advandec in before closign the head tag and then you use the HTML&Widget Object and you add the example code to show the text with this font.
Many thanks!