I decided to use font-variant: small-caps for my h1 with font from google fonts ( Roboto Condensed - with latin extended characters)
On every browser it renders properly but not on Safari ( tested on macOS Sierra 10.1 )
font-variant: small-caps works as well on Safari but not with lating extended charactes. Then it just going creazy. Instead of showing "Bądźmy w kontakcie" it shows "A aa w kontakcie" or it swaps ę to some bolder ę.
How to make it work ?
It seems that fonts embeded from google fonts doesnt work for what I need. Maybe if I would attach my fonts diffrently it could work....
Anyway I decided to delete font-variant and I used text-transformation: uppercase and I changed font-size to smaller value and I have same effect that I wanted to produce.
I have a chart with the data label font set as 'Gill sans'. However when i export the chart to png the font changes. Is Gill sans not supported for export? IE8 used.
At this moment we cannot add extra font, but please request your idea on our uservoice website highcharts.uservoice.com.
I've run into a problem where the glyphs are positioned as I expect when I specify line height:1 UNTIL the font-size became greater than 255px. Set the font-size to 256 and bam, the glyphs change position dramatically and become too high on the line.
I'm using Google Web fonts to bring in Josefin Sans - http://www.google.com/webfonts/specimen/Josefin+Sans
Edit: I'm using Chrome on Fedora, not one of those cool machines with market share and funding
Simplified fiddle here - http://jsfiddle.net/jBAnc/
Edit: The fiddle isn't showing the code for me. If you click on "Bacon", it'll toggle between 255 and 256, causing it to bounce back and forth (at least for me).
I don't encounter this problem when the font is a basic web-safe font such as Arial, so I assume it has something to do with the google Web-font. Is this a problem with the font's encoding, possibly the program the font was created with (255 seems significant)?
I'm getting inconsistent line-height/spacing issues with this font. I'm beginning to suspect that it's a problem with the construction of Josefin Sans itself.
EDIT: after a little more Googlizing, it appears the issue is not so much the font itself, but the Google Webfont API.
http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
Short answer: Download and host the font yourself and you should have no issues.
There's nothing wrong at all. You're just expecting all fonts to have the same x-height, descender/extender-heights, and they just don't (9 times out of 10).
The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). And Josefin Sans is in the house as well.
Pay particular attention to the differences in:
the top spacing between the capital Q and its parent's border
the various heights of the Xx (especially, the lower-case vs capital)
descender of the lower-case G (some actually come out of their
parent)
_http://jsfiddle.net/suK2U/
To answer your question about 255/256px, I'd venture to say that you just happened upon a 'sweet-spot' between your container and its parent. At 256, it starts colliding (and margins start to collapse, or the like).
I'm trying to use a Helvetica Neue Condensed font which I got from the Adobe Font Collection Pro Package. Unfortunately, it seems to draw incorrectly when I use it within a UILabel.
The line height seems to be calculated correctly (I think), but when the font is displayed, it is aligned to the very top of the bounding box. I called [myLabel sizeToFit] and only adjusted the width to produce this screen capture:
I had the same problem with both the bold and regular version of the font. I was able to pull a version of Helvetica Neue Bold from OSX and put it on my device and it displays fine (green background in above picture).
What could be wrong with the either the font file or my code that would cause it to draw this way?
I posted a solution that involves patching ttf font file here:
Here's the solution that worked for my custom font which had the same issue in UILabel, UIButton and such. The problem with the font turned out to be the fact that its ascender property was too small compared to the value of system fonts. Ascender is a vertical whitespace above font's characters. To fix your font you will have to download Apple Font Tool Suite command line utilities. Then take your font and do the following:
~$ ftxdumperfuser -t hhea -A d Bold.ttf
This will create Bold.hhea.xml. Open it with a text editor and increase the value of ascender attribute. You will have to experiment a little to find out the exact value that works best for you. In my case I changed it from 750 to 1200. Then run the utility again with the following command line to merge your changes back into the ttf file:
~$ ftxdumperfuser -t hhea -A f Bold.ttf
Then just use the resulting ttf font in your app.
So this is a modified version of kolyuchiy's answer.
I opened my font with Glyphs, and then exported it without modifying anything. Somehow, magically, the vertical alignment issue was gone!
What's better is that the new font plays nicely with methods like sizeWithFont:, so it doesn't have the issues mentioned by Joshua.
I took a look at the HHEA table with the command kolyuchiy mentioned, and noticed that Glyphs modified not just the ascender, but also lineGap and numberOfHMetrics for me.
Here's the raw data, before:
versionMajor="1"
versionMinor="0"
ascender="780"
descender="-220"
lineGap="200"
advanceWidthMax="1371"
minLeftSideBearing="-73"
minRightSideBearing="-52"
xMaxExtent="1343"
caretSlopeRise="1"
caretSlopeRun="0"
caretOffset="0"
metricDataFormat="0"
numberOfHMetrics="751"
and after:
versionMajor="1"
versionMinor="0"
ascender="980"
descender="-220"
lineGap="0"
advanceWidthMax="1371"
minLeftSideBearing="-73"
minRightSideBearing="-52"
xMaxExtent="1343"
caretSlopeRise="1"
caretSlopeRun="0"
caretOffset="0"
metricDataFormat="0"
numberOfHMetrics="748"
So the moral of the story- don't just increase the ascender, but modify other related values as well.
I'm no typography expert so I can't really explain the why and how. If anyone can provide a better explanation it'd be greatly appreciated! :)
iOS 6 honors the font's lineGap property, while iOS 7 ignores it. So only custom fonts with a line gap of 0 will work correctly across both operating systems.
The solution is to make the lineGap 0 and make the ascender correspondingly larger. Per the answer above, one solution is to import and export from Glyphs. However, note that a future version of the app might fix this "bug".
A more robust solution is to edit the font yourself, per this post. Specifically,
Install OS X Font Tools.
Dump the font metrics to a file: ftxdumperfuser -t hhea -A d YOUR_FONT.ttf
Open the dumped file in an editor.
Edit the ascender property by adding the value of the lineGap property to it. For example, if the lineGap is 200 and the ascender is 750, make the ascender 950.
Set the lineGap to 0.
Merge the changes into the font: ftxdumperfuser -t hhea -A f YOUR_FONT.ttf
Once you do this, you might have to adjust your UI accordingly.
For those running OS X El Capitan and coming to this thread, you might have noticed that the Apple Font Tool Suite is no longer compatible (at least for now).
But you can still perform the changes described by kolyuchiy and Joseph Lin with free font editing software FontForge.
Open the font with FontForge and select Element in the top menu, then go to Font Info > OS/2 > Metrics. There you want to edit the HHEad Line Gap and HHead Ascent Offset values.
Once you've done the necessary edits you can just export the font in File > Generate Fonts and select the right font format
Download and Install Apple's Font Tools here: https://developer.apple.com/downloads/index.action?q=font (the download link is in the bottom)
Open the terminal and cd your way to where your font is
Run this command: ftxdumperfuser -t hhea -A d MY_FONT_NAME.ttf
Now you have an xml file with some of the font's properties, edit it in your text editor
Search for the "lineGap" property and add 200 to its value
Save the xml file
Run this command: ftxdumperfuser -t hhea -A f MY_FONT_NAME.ttf
Delete the xml file
Try the configured font on iOS 6 and see if it looks better.
If you need, you can go back to step 3 and add/subtract to the "lineGap" property. (I ended up adding 250 to my configuration)
We had the same issue with one of our custom fonts. We also "fixed" the problem by editing the font ascender property. However, we found that this created other problems and layout issues. For example dynamically setting cell height based on label height would blow up when using our ascender edited font.
What we ended up doing was changing the UIButton contentEdgetInsets property.
yourButton.contentEdgeInsets = UIEdgeInsetsMake(-10, 0, 0, 0);
Not sure which method is better, but just wanted to share another way to fix the problem.
Thanks to the this answer I fixed my problem with Glyphs, but a little bit differently.
I opened my font with Glyphs (also works with Glyphs mini) and found this section there (this from Glyphs mini, to get there push i button in the right top corner):
Just delete all of this alignment zones (or some of them) and it will fix this problem.
Worked perfectly for me.
Creating attributed text from your labels text was the fix for me. Heres an extension:
extension UILabel {
/// You can call with or without param values; without will use default 2.0
func setLineSpacing(lineSpacing: CGFloat = 2.0, lineHeightMultiple: CGFloat = 2.0) {
guard let labelText = self.text else { return }
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = lineSpacing
paragraphStyle.lineHeightMultiple = lineHeightMultiple
let attributedString:NSMutableAttributedString
if let labelattributedText = self.attributedText {
attributedString = NSMutableAttributedString(attributedString: labelattributedText)
} else {
attributedString = NSMutableAttributedString(string: labelText)
}
// (Swift 4.2 and above) Line spacing attribute
attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value:paragraphStyle, range:NSMakeRange(0, attributedString.length))
self.attributedText = attributedString
}
}
For my custom font I got the result I need from:
self.myLabel.setLineSpacing(lineSpacing: 1.2, lineHeightMultiple: 1.2)
This works by using the native provided NSMutableParagraphStyle() which contains line height and spacing properties (which are accessible as #IBOutlet properties in the Storyboard too if you are not programming your labels).
Have you tried Core Text? I've had some success rendering custom fonts through Core Text, but I don't know if it would fit your situation.
I used https://github.com/fonttools/fonttools - very easy to use and free. In my case, the change of 'ascender'=1000 and 'lineGap'=0 in 'hhea' table did the trick.
Based on article from Trevor Harmon https://medium.com/#thetrevorharmon/how-to-use-apples-font-tools-to-tweak-a-font-a386600255ae
If your are having trouble with these command line utilities then try fontcreator on window. and change font assender from its setting menu.
For anyone who are struggling to use ftxdumperfuser (kolyuchiy answer) on Mac OS Mojave because of command not found error:
Download the font tools package from Apple. Found them at
https://developer.apple.com/download/more/?q=font, picked the one for
XCode 11.
Mount the dmg file
Enter the disk image cd /Volumes/macOS\
Font\ Tools
Extract the package to a folder of your choosing: pkgutil
--expand-full macOS\ Font\ Tools.pkg ~/font-tools
The CLI tools are now available in ~/font-tools/FontCommandLineTools.pkg/Payload, you
may add the folder to your path (export PATH="$PATH:$HOME/font-tools/FontCommandLineTools.pkg/Payload"), or copy the utils to your bin
folder.
I had a similar issue with iconic "FontAwesome" font in my Sprite Kit game.
Setting the SKLabelNode's SKLabelVerticalAlignmentMode property to .Center worked for me.
myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentMode.Center
Just wanted to share in case somebody would be struggling with the same problem.
I have a font which only has a regular weight… I’d like to use another font as the bold weight and another as the italic weight… and have sifr use the extra fonts as a replacement based on strong and or b tags
I’ve tried embedding the multiple fonts in the .swf but only the regular weight get’s applied when sifr is activated. If I have two separate .swf font files I can the text to generate in either font but can't seem to apply the bold version to the bold text in the sentence.
Is their a smarter way to do this? using sifr3 - r436 with CS3 Flash Professional to create the font files
Okay after an hour os do googling various terms I found this
http://discuss.joyent.com/viewtopic.php?id=24567
which answers my question - I now have the whole family embedded as I need
Thanks
R