I'm using Google's Noto Sans as a standard webfont. I also want the browser to display special characters like arrows and bullets, using the webfont.
However, Chrome Dev Tools tell me, that e.g.
the unicode character 'BLACK RIGHT-POINTING TRIANGLE' (U+25B6) http://www.fileformat.info/info/unicode/char/25b6/index.htm gets rendered as Segoe UI Symbol—Local file(1 glyph) (I'm currently using Windows 10)
(see screenshot)
why is that? Even though I defined Noto as the font for the div, containing the ▶ symbol.
The ▶ symbol is included in the Noto fontset and works perfectly in apps like InDesign, Illustrator etc.
Please see this fiddle: http://codepen.io/lieferant/pen/bZARVV
The corresponding part is <div class="noto">▶</div>
CSS of font-face Chewy has a unicode-range that didn’t cover the character U+25B6.
Related
I'm using the following css:
#font-face {
font-family: 'bariol_regularregular';
src: url('Bariol_Regular.otf');
}
The font is being used and there are no errors on the page. When I add this custom font to text on the page it is visibly different to the default styling.
This is how the font should show:
However, this is how it is showing:
Pay particular attention to the apostrophe (') and the letter'g' where the most noticeable differences occur.
If I use a native app then the font shows correctly. The demo lettering on the site where I downloaded the font also displays correctly - https://www.dafontfree.net/freefonts-bariol-f64170.htm
Is there something I'm missing/not doing correctly?
The typeface has multiple glyphs available for various characters so you'll need to find the character codes.
The goal is to remove the bold letters from fl and fi in the text
chrome 61
I was able to reproduce the issue in this codepen:
https://codepen.io/jossnaz/pen/vWgEGB
basically fira sans not applying any letter-spacing to the chars and they chars are bold. No idea why.
this is how it looks on firefox 56:
There is a CSS attribute designed for controlling how ligatures are generated automatically by browsers.
Try adding:
font-variant-ligatures: none;
to your paragraph element.
See this codepen: https://codepen.io/jossnaz/pen/vWgEGB
For the issue where you want to control character spacing, and your source text is composed like "truffle shuffle" with separate F and L characters, this will prevent the browser from generating ligatures and apply spacing as you'd probably expect.
However, this is not the only issue you are running into in your site!
In your page, the text is actually using the Unicode fi and fl ligature characters (U+FB01 and U+FB02). The browser will not separate these back into separate characters, and they are not included by the Google Fonts API. This is possibly some plugin in your CMS automatically converting ligatures, or perhaps the result of copying and pasting from an editor.
See: https://codepen.io/anon/pen/mqmLLZ for an example of this.
These ligature characters are not included in the webfont - the Latin ligatures are at U+FB00-FB06 and either the font or Google's Font API doesn't include them.
As a result, they are switching to the fallback font, which in this case is specified as the generic sans-serif - probably Arial or Helvetica.
They're not bold per se, but they're heavier than Fira Sans.
I am trying to use AGA Arabesque font (downloaded from here), with this CSS:
#font-face {
font-family: 'AGA Arabesque';
font-style: normal;
src: url('//example.com/wp-content/uploads/useanyfont/140705120824ARABSQ.eot');
src: local('AGA Arabesque'), url('//example.com/wp-content/uploads/useanyfont/140705120824ARABSQ.eot') format('embedded-opentype'), url('//example.com/wp-content/uploads/useanyfont/140705120824ARABSQ.woff') format('woff');
}
I am able to use the font properly in Chrome. In the latest Firefox and IE, all I see is an English letter in place of the desired symbol.
In Chrome:
In Firefox:
What could be going wrong? Is there a way I could use base64 encoding to try and get around this issue?
EDIT: Other fonts, used this way, work correctly on all three major browsers
I converted the font to WOFF, and I found that all glyphs got mapped into the Unicode Private Use Area, in the U+F000 block. I don't know if this is a bug in the conversion tools or in the font. But given that this font is quite old (it's dated 1994, so it's from the Windows 3.1 era), it's likely that it doesn't comply with current standards.
I see two options to get this font working:
Get a font editor and fix the character assignment.
Use entity references to access the glyphs. Not very convenient, but possible: look up the hex code for your character in an ASCII table, add F0 in front of it, and use that code in an entity reference. E.g. [ has hex code 5B, so use entity refrence . (Sample page download)
This works in Firefox and Chrome for me. I don't have a Windows system handy to test Internet Explorer and the EOT format, but I suspect the situation there will be identical.
I'm afraid your WebFont is too large to be considered for rending. During testing even Chrome decided to render with Times New Roman.
If you're only using a set of characters from the font, consider creating a new font with only those characters.
Encoding the font using base64 will on narrow your audience, since not all browser support it. Interestingly enough the webfonts are loaded without an error, the browser simply refuse to render them, even the font preview in Chrome is just plain Times New Roman.
Also the link you posted doesn't link to a web font, just to a regular desktop font.
IE has trouble with #&8302;(Actual character references) be interpreted as white space
with multi byte
OK:http://tmp.zeg.la/shift_jis.html
OK:http://tmp.zeg.la/euc-jp.html
NOT OK:http://tmp.zeg.la/utf-8.html
I don't get white space, I get squares, and it's not to do with the character references, it's just because IE can't render that character in the fonts it is trying to use.
The browser needs to know the language of the document to choose the default font to render the document in. Each language has its own default font, for example Times New Roman for Latin alphabets, or MS Gothic for Japanese. You can change the default font for a language from the browser settings.
Some browsers switch the default font based on language, so you can set it by saying lang="ja" for Japanese. Others (such as IE) switch it based on the encoding of the page, so that encodings that are normally associated with Japanese such as Shift-JIS pick up a Japanese font by default. This is somewhat unfortunate as really the encoding of the page should have nothing to do with the font, but it's heuristic in common use. Some browsers use both.
This probably wouldn't greatly matter, except that IE is notoriously poor at choosing fall-back fonts for when glyphs aren't available in the selected font. If it hasn't managed to choose a particular font for the language in the document, it may well end up with the squares. For what it's worth, I get Japanese rendered correct for all your example pages when using a real Japanese Windows install (with Japanese as the locale for the system code page), but squares on an English install with extra Japanese fonts installed.
So:
(1) mark your document as being in Japanese:
<html lang="ja">
(2) use CSS to direct IE to the Japanese fonts that most IE users are likely to have installed:
body { font-family: "Meiryo", "MS Gothic", "ＭＳ 明朝", Verdana, sans-serif; }
Scenario:
Flex application utilizing an #font-face declaration for embedding the font. (Embedded fonts are required to be able to rotate text.)
The application was originally developed as an English application, but during localization it became necessary to locate a unicode font capable of displaying Asian characters. The original implementation of the application uses four fonts to satisfy the various permutations of character emphasis. Bold, Bold Italic, Italic and Normal are all supplied through the corresponding Arial fonts in the Arial family.
Problem:
When trying to compile in the font as one that could be used for the bold, italic, and bold italic through something like (yes its not ideal, this was just a test to see if it could be done):
#font-face { src:url("/fonts/ArialUnicode.ttf");
fontFamily: myFamily;
fontWeight: normal;
fontStyle: normal;
advancedAntiAliasing: true; }
#font-face { src:url("/fonts/ArialUnicode.ttf");
fontFamily: myFamily;
fontWeight: bold;
fontStyle: normal;
advancedAntiAliasing: true; }
etc.
The problem is that when compiling the application Flex gets cranky and gives the following error message:
[ERROR] /dirpath/Style.css:[49,-1] exception during transcoding: Font for alias 'myFont' with italic style was not found at: file:/dirpath/fonts/ArialUnicode.ttf
So with some investigation it was determined that since Unicode supports neither Italics nor Bold, that when the Flex compiler attempts to embed the font, it gets unhappy as it cannot locate a font at the specified location that will satisfy the css requirement.
Now when the font-face declaration is taken back to its simplest form of:
#font-face { src:url("/fonts/ArialUnicode.ttf");
fontFamily: myFamily;
fontWeight: normal;
fontStyle: normal;
advancedAntiAliasing: true; }
everything compiles fine and the application displays all normal weight, normal style Asian characters fine. However when displaying things that are to be displayed in Bold or Italic in the style sheet, a box appears denoting that there is no embedded font nor any system font that can render that character in those styles.
Now here is where it gets weird.
If the exact same Unicode font is installed onto the system, it begins displaying the Asian characters in bold and italic. This makes no sense as the Bold and Italic characters are not in the font as demonstrated when Flex tried to embed that font to satisfy those css styles above. Yet it is evident that this font is being utilized to display the bold and italic characters as before they were just boxes before it was installed as a system font. Is this some kind of Flex voodoo? And if so is there some way I can programmatically invoke said voodoo as I cannot rely on the user having to go out and get the unicode font installed on their system.
Edit:
Here is some further information that may clarify the issue.
My question is not really how do we do multiple font faces and weights for roman characters, it is "How does Flex apply bolding and italics to a system font. Even more so when it says that that font does not support those when trying to embed that font."
The steps to make the issue reproducable are such:
Embed only MS Arial Unicode into the application and deploy it.
On a fresh Windows 2003 machine, open up Firefox and select Japanese language.
Navigate to the application URL and view the boxes where the bold and italics should be.
Now exit Firefox. Install the MS Arial Unicode font into the Windows 2003 system.
Open Firefox and repeat. The areas that used to be boxes, are now bold/bold italics/italics Japanese characters.
It isn't so much the how to solve this issue. There are plenty of viable solutions. However what I would really like to know is how does Flex apply bold and italics to a font that it says does not support bold or italics.
Thanks,
C
The problem is that you're specifying the same file name for all four font variants. The single ArialUnicode.ttf file contains only one variant.
Using the names from your c:\Windows\fonts directory, you want to embed arial.ttf, arialbd.ttf, arialbi.ttf, and ariali.ttf. These are the normal, bold, bold-italic and italic variants, respectively.
Beware that not all fonts can be embedded freely, both from a technical standpoint and from a legal standpoint.
The legal side is that fonts are software, and so need to be licensed just like any other third-party code you include in your program. You might want to look at the Bitstream Vera font family, as they are liberally-licensed. The family is highly capable, designed to be used as core fonts in Linux and such.
The technical side is that these rules are baked into the TTF and OTF file formats, and tools like the Flex compiler obey the license restrictions declared in the file. If the font is marked "no embed", it won't let you embed it.