iOS 3.2 and later support this. Straight from the What's New in iPhone OS 3.2 doc:
Custom Font Support
Applications that want to use custom fonts can now include those fonts in their application bundle and register those fonts with the system by including the UIAppFonts key in their Info.plist file. The value of this key is an array of strings identifying the font files in the application’s bundle. When the system sees the key, it loads the specified fonts and makes them available to the application.
Once the fonts have been set in the Info.plist
, you can use your custom fonts as any other font in IB or programatically.
There is an ongoing thread on Apple Developer Forums:
https://devforums.apple.com/thread/37824 (login required)
And here's an excellent and simple 3 steps tutorial on how to achieve this (broken link removed)
- Add your custom font files into your project using Xcode as a resource
- Add a key to your
Info.plist
file called UIAppFonts
.
- Make this key an array
- For each font you have, enter the full name of your font file (including the extension) as items to the
UIAppFonts
array
- Save
Info.plist
- Now in your application you can simply call
[UIFont fontWithName:@"CustomFontName" size:12]
to get the custom font to use with your UILabels and UITextViews, etc…
Also: Make sure the fonts are in your Copy Bundle Resources.
I think the issue is the relatively tall x-height of Century Gothic. Try using ex
units in your font-size
declaration. ex
units are based on height, unlike em
, px
, and pt
.
Setting the line-height
to a pixel size would also help normalize the height, but would cause problems for users who change the text zoom level in their browser.
Edit: I went back and tested, and ex units don't help. Century Gothic is both taller and wider than the others.
The issue is, the DOM will not allow you to tell which specific font the user has from your listed alternates, and CSS doesn't allow separate font sizes (or adjustments) for each font.
However, JQuery can test the size of a container of text. So, if you provide a hidden element on your page with a known letter in it, you can test the width of that element on the user's browser.
Since the width of that letter will be determined by which font the user has installed, you can compare that width to the width of the same text in your preferred font on your own computer and compute a font size for the user that roughly matches what you intended.
Example code:
<style>
p { font-size: 15pt;
font-family:"Tw Cen MT","Gill Sans","Century Gothic",sans-serif;
}
p#testwidth {
/* Ensure test is invisible and isn't messed up with borders, etc. */
margin:0; padding:0; border:none; color:white; display:inline;
}
</style>
<p>Your text goes here.</p>
<p id="testwidth">m</p>
<script language="Javascript">
window.onload = function() {
// Same as your default CSS for font-size (just the number, not the units)
var desiredFontSize = 15;
// Experiment by testing width when Tw Cen MT *is* available. In pixels.
var expectedWidth = 17;
// width found will depend which font is available
var testedWidth = $('#testwidth').width();
// ratio, rounded to one decimal point
var normalizedFontSize = Math.round(
expectedWidth / testedWidth * desiredFontSize * 10) / 10;
// change the stylesheet to "fix" the font size (in your preferred units)
$('p').css('font-size', normalizedFontSize + 'pt');
}
Four caveats:
- It won't necessarily overcome every difference in size between two alternate fonts. Vertical alignment, etc. may not be perfect if they don't have your preferred font.
- It may annoy users who have a default text zoom level set in their browser, since this will essentially force the font size when the page loads. Fortunately, they can still zoom in or out as desired and override your forced font size.
- I seem to recall IE having a problem with font sizes with many numbers after the decimal point, so I rounded. Should be close enough.
- I used the width of a single letter "m". If you wanted a more accurate result, you could use a longer string of letters provided it doesn't wrap on the user's browser (which would break the width test). A few upper and lowercase letters and a space should be a good test.
Best Answer
Check for the setting to have the fonts and colors you specify in Internet Explorer to be used for all websites, regardless of the fonts that have been set by the website designer.
In IE, click the Tools / Internet Options.
This can be set on an individual computer or a domain level setting pushed out by administrators as a GPO. It will then behave the same way no matter what computer you test on.