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; }
Related
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
I'm using 'Raleway' from Google webfonts in my Wordpress site. The standard number glyphs in this font are 'Old Style', meaning some number go over and others under the baseline. When I download and check out the font in Fontlab, I can see there are glyphs with modern styled numbers, they don't have unicode numbers assigned to them, but they have names like three.lnum or eight.lnum
Is there a way to display these glyphs from custom fonts in Wordpress? They don't show up in the Special Characters List. Thanks.
By adding font-feature-settings: "lnum" 1; to the CSS you can force lining numerals.
There is apparently a problem with Raleway hosted at GoogleFonts which hampers the font-feature-settings. This means you have to host the font yourself. Luckily Raleway is free to redistribute.
You can download it from GoogleFonts and run it through the FontSquirrel Webfont Generator. Set options to Expert, under OpenType Flattening check Lining Numerals to set lining numerals as the default for your version of the font.
There is a great article at codesmite.com explaining old style and lining numerals.
I'm working on a website where the users will be printing pages from the site fairly frequently, in order to give them to people without internet access. Some of the text comes out garbled when printed on our users' office printers:
That's supposed to say Reduced Fare and Free Ride Programs, Chicago Transit Authority.
My first thought was that this has something to do with the font we're using, so I changed that text to have font-family: 'Times New Roman', serif. Some google research made me think those font settings were widely supported and shouldn't cause problems, but our users are still having the issue.
Even if you don't know exactly how to fix this problem, I would appreciate suggestions about
What other than the font selection could be causing it?
If you do think it has something to do with the font, what is a good font to use? Or how could I figure that out, is it printer-specific?
Update
The page is being printed from the browser, which for this particular group of users is IE8. I'm not sure what version of Windows they're on. I've tested this on a Windows machine with IE8 in our office, and was not able to reproduce the issue. So while the browser might be a factor, I don't believe it's the only factor.
Second Update
The font we're using is Libre Baskerville, which we're loading through the Google Fonts API. It renders fine on screen, and actually prints with no issue from some of the printers at our client's office. The text only comes out garbled when printed on a Lexmark MS410dn.
I saw these same types of printing errors. I created a PDF in Indesign on Windows 10 using the Libre Baskerville font. When I tried to print the PDF on OSX using Preview I got the same garbled glyphs seen above. I fixed it by uninstalling the Libre Baskerville fonts which were Truetype format and installing Libre Baskerville fonts in Opentype format and resetting the fonts in the document. It seemed to work.
In the end the simplest solution was to use a different font for printing. The issue only happened with the Libre Baskerville font on a few specific printers, so in our print.css stylesheet we just use a basic serif font instead. Not ideal, but at least the printouts are legible.
In the original post I said that I had tried switching the font in the printouts and users were still having problems. This turned out to be due to caching of the print.css stylesheet, so that fix actually did solve the problem.
In the long term we'll probably find a font that works consistently on all their printers and switch the website over to that as well.
For the record (and anyone reading this with a similar issue), I had exactly the same issue trying to print a document written in Libre Baskerville on my laptop, in LibreOffice. The font is embedded in both RTF and PDF formats and the text is garbled in the same way. I also worked around the issue by changing to a different font. It's a pity as LibreBaskerville is a nice font.
Try replacing the True Type version of the font with the Open Type version - I am now able to print Libre Baskerville with no issues. The Open Type version is not easy to find as most downloads (including Google Fonts) only give you the option of a .ttf file. Search for a .otf file version - I found one here: https://www.broble.com/download-free-font/libre-baskerville
It might be that the imported font files have some errors in them. Sometimes, if you use a online font to webfont converter it makes some mistakes with the conversion. You could try Google Fonts. Find a serif font that you like and use their files and import scripts.
For example, if you want to use the font Bitter:
Just put #import url(http://fonts.googleapis.com/css?family=Bitter); at the top of your CSS file
Use font-family: 'Bitter', serif; in your style declarations.
NB: The serif part is a fallback in case something goes wrong, then the clients browser chooses the default serif font instead.
With regard to displaying korean font:
I'm noticing when I use arial, it's defaulting to sans-serif, which is of course different on Mac and Windows. I'm having a hard time finding information about this on the "internets". I was hoping someone here might be able to tell me a list of fonts that would work on both Mac and Windows for Korean without needing to embed a font.
Live example
Mac:
Windows:
Since Arial does not contain hangul characters, the use of font-family: Arial, sans-serif is effectively equivalent to font-family: sans-serif for Korean text. Arial should be removed from the list, since would only cause harm – when some special symbols used on the page exist in Arial, the browser would use it for them, resulting in a mix of fonts.
Using sans-serif means using a browser-dependent sans-serif font. It is of little use here. Instead, list down a set of fonts known to contain the characters you need. You can hardly expect to find a single font for the purpose that would be available on all computers, unless you find a font you can use as a downloadable font (web font) via #font-face.
According to http://en.wikipedia.org/wiki/List_of_Microsoft_Windows_fonts, there are fonts that are preinstalled on Windows, or at least shipped with it, containing Korean characters: Batang, Dotum, Gulim, Gungsuh, Malgun Gothic (no hanja). Probably none of them is present in all versions of Windows, and probably at least one of them is available in reasonably modern versions of Windows. But they are rather different.
You could also check the extensive page http://www.wazu.jp/gallery/Fonts_Korean.html and, if some of the free alternatives suits you, consider using it as a downloadable font. The fonts tend to be large, but the impact on efficiency might still be tolerable.
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.