Font rendering problem with Internet Explorer

I have noticed that web apps I have created appear differently in different browsers. I primarily use Chrome or Firefox on a Windows PC and all my apps are designed for them. Fonts also look fine in Safari. But when I launch an app with Internet Explorer 11, the fonts are larger and don’t fit in the area reserved for them. Am I correct that Xojo uses the default system font for the browser and that I can fix this problem by adding fonts to the project that would render the same no matter what browser the user is running?

Not exactly. You can define a webstyle that specifies a list of preferable fonts, and the browser will use them if it has them. But there’s no guarantee that your desired font will be available.

Others have done some work with Google Fonts, so that you can basically import a particular font at runtime, but I don’t think it’s supported universally on all browsers (someone correct me if I’m wrong).

Web Custom Controls includes a lot of WebStyle and CSS related enhancements, including the ability to easily use Google Fonts. I can confirm that they work on IE11.

Incidentally, I just realized that my stand alone demo was compiled with a version of Xojo that doesn’t recognize IE11 and shows the “browser unsupported” screen. I’ll recompile with the latest version of Xojo tonight. Use the CGI demo that was built with Real Studio to test Google Fonts in IE11. After you launch it pick the WebStyleTD & WebStyleExt demo from the list.

IE does always seem to be the odd ball out. But checking right now the Google Fonts look pretty close on my screen between FireFox Mac and IE11 Win7.

They should work fine in all browsers. This forum uses google fonts. I use them on the Xippets website. You basically declare them in your head section as a CSS stylesheet, for example:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,700' rel='stylesheet' type='text/css' />

and then use them in your CSS selectors as you would any other font declaration:

html, body { font-family: 'Open Sans', sans-serif; }
There is an additional bit of overhead when loading in using them but this is all explained on Google fonts. The key is to only link to font variations you will use. e.g. if you will only use bold and normal font weights, only select 400 and 700 weights for example. The more variants you select, the longer the load.