How to set the replacement font in HTML? - html

I'm making a HTML banner with Edge Animace CC. I've set my font to droid-serif.
It works fine until I test it on a Nokia Lumia 610.
It gets replaced by a different font which replaces the character "Ž" with symbols.
So can I replace/set the substitute font with proper one in html which shows character "ž"?

First find out which font available in windows phone supports that character,and in your CSS font style append it along with droid-serif.
font-family: "droid-serif", "windows-phone-font-name" , serif;
If that don't work, you should try Web Fonts (maybe Google Web Fonts) that specifically supports your required character, and use that for it.
(** I would comment but I cannot yet **)

Related

CSS font family is being ignored in HTML page displayed through Linux app

Im working on a HTML/CSS start page for a linux program I'm running. All my font-families were set to Arial, Verdana, Sans-serif in the css. When opening the page in Chrome or Firefox, the fonts displayed properly. Even running the windows version of the app with the same start page displayed correctly. But for whatever reason, the linux version displays the start page with all fonts replaced with courier. Its a very jarring font and I cant seem to get Linux to not default to it on this program. Ive tried changing the fonts in the css doc to Helvetica, or adding single or double quotes around each font family name, but nothing seems to change this. Does linux have some weird font quirk with css that I don't know about? any info is helpful.
Try using the Google Fonts API to ensure font consistency across platforms.
Find the fonts that you are interested in on Google Fonts, if they are available. Here are the steps for how to import them into your HTML document (internet connection required):
Go to Google Fonts
Use the search bar in the top right corner to find one of your fonts
Press the Plus (+) button next to your font
Repeat steps 2 and 3 for all of the fonts that you need
Click the Families Selected toolbar at the bottom of your screen
Select Embed
Select Standard
Copy the code block (highlighted in grey) and paste it within the <head> tags of your HTML document.
Specify the fonts that you want to use as instructed by the site (under Specify in CSS)

BlinkMacSystemFont does not allow highlighting text when saving as PDF

I have the following HTML page:
<style>
body {font-family: BlinkMacSystemFont;}
</style>
text
When viewed in Chrome on OS X 10.11, text is displayed in the system font (supposedly San Francisco with El Capitan and Helvetica Neue with Yosemite). When I save the webpage as a PDF and open it in Preview, I cannot select the text and highlight by clicking and dragging, and instead the entire page is selected as if it is an image. I've checked the PDF properties using Adobe Reader and there are no embedded fonts used. How can I fix this to be able to select individual text? Is there any way around this?
OpenType fonts have a concept of permissable usage. This defines how/if the font can be embedded and used. Some fonts allow the entire font to be embedded and redistributed. Some fonts allow a subset of the glyphcs to be embedded, which is useful when a document only uses a small number of glyphs in a unicode font. Some fonts only allow a rasterized (bitmap) reproduction of the glyph. Some don't allow any embedding. Tools that produce PDFs and the like must follow the rules, or could face legal action from Apple. I certainly wouldn't want to be on the receiveing end of that.
I suspect that the OSX fonts are of the category that only allows rasterized embedding. Your best bet is to find another font that doens't have this restriction.

How do webfonts that don't contain certain chars behave?

I have a webfont that doesn't support Cyrillic. The font only has latin chars. If I try and display some Cyrillic chars, instead of displaying blank or corrupt chars (as I would expect it) it bypasses the webfont and displays them in a system font instead. Whilst this is a good thing I don't know why or how. As I understand it, if a font specified in the CSS isn't supported by a browser or the browser doesn't support webfonts it is then that a substitute font is put in place. However this is happening if the characters used aren't supported. Is my understanding of this correct?
it can be difficult when using a font that is not supported in your language.
It varies from font to font and browser to browser.
So there is no hard and fast rule sorry.
I would recommend making sure you HTML is set to support Unicode fonts.
<meta charset="utf-8">
I would also programme your font so it is in a stack,(has a default to full back on if unsupported)
And give it and test in all browsers to see if it defaults or doesn't show.
You may wish to find a font that is suited to that language.
Most browsers do missing character fallback by default, so you never see blank characters when something's missing. If the developer uses a font family stack like font-family: MyCyrillicFont, Arial, sans-serif your browser will use the next available font. Otherwise, the browser itself has a default font setting (that the user can typically choose).
In short, browsers have fallbacks on the characters level.

Google font displaying an icon instead of letter

We are working on a project and one of the participants has a problem with a Google font (Doppio One). The problem occurs in Firefox 33.1 with windows 8.1
On certain places he sees an icon instead of the letters (ft). I can't find the solution. I can only find topics where letters a being displayed instead of icons. But my problem is the other way around.
In another topic the same question is asked. Didn't notice it before:
DoppioOne-Regular.ttf Font does no support ft character in android
What i did:
Instead of inserting the font as a Google Font I downloaded the .ttf file and converted it into a webfont with Font Squirrel Webfont Generator.

Unicode character (hexagon) not displayed on some computers

I have a huge problem. I just updated my websites homepage to display a unicode hexagon character: ⬢ ⬢ aka U+2B22
I made it 200px big and filled it with text. It looks good and works fine on my computer. With both Internet Explorer (win8) and Firefox 28.
I tested it on 5 different computers and it didn't work there! Tested with Firefox 28 and Internet Explorer (win7) on each device and on one computer even with the newest Chrome.
So what am I doing wrong? How is it possible that it works on my FF 28 and on 5 different devices with FF 28 it doesn't?
I already tried:
<?php header('Content-Type: text/html; charset=utf-8'); ?>
and in HTML directly:
meta http-equiv="content-type" content="text/html; charset=utf-8"
Is U+2B22 not part of utf-8?
Try it yourself here, scroll to the very bottom of: http://jtauber.github.io/articles/css-hexagon.html
For my PC it looks like this: http://250kb.de/u/140401/j/RzN1lYTL8fLJ.jpg
On other devices it looks like this: http://250kb.de/u/140401/p/VEeerGhyv4lM.png
I appreciate any help!
The character U+2B22 BLACK HEXAGON is included in a few fonts only. None of those font comes with Windows or with other widely used software, so in most computers, there is no font containing it. Moreover, browsers may fail to render the character even if some font in the system has it. For some more general explanations, see my Guide to using special characters in HTML.
In this case, the font setting is font-family: "Helvetica Neue", Arial, Helvetica. None of those fonts contains the character, so each browser tries to use other fonts in the system, in a browser-dependent order. In your own computer, you have a font that contains the character. You may have downloaded and installed it, or it may have come along with some software
What you could do is, alternatively,
a) specify, in a font-family declaration, a list of fonts known to contain the character. This could help against problems of browsers not finding a font, but this would not matter much.
b) use a downloadable font (web font, via #font-face). This would mostly be overkill if you just want one character for essentially non-text use. Fonts that contain U+2B22 are generally large.
c) use an image instead, possibly as a background image. This would be here the rational choice, especially since you would not use U+2B22 as a character in text but as a background of a kind.
Regarding the question “Is U+2B22 not part of utf-8?”, characters aren’t really part of utf-8. Instead, utf-8 is a transfer encoding for characters, and all Unicode characters (and, moreover, all Unicode code points) have representations in utf−8. Besides, the page mentioned does not contain U+2B22 as such but as the character reference ⬢, and this works independently of character encodings. Thus, this is not an encoding problem, but a font issue.
These computers on which it does not work do not have a font installed which contains a glyph for this particular character. That is all.
Solutions would include to not depend on users having fonts with such unusual characters installed and provide them as web font instead (which you might have to create) or to use an image, SVG or canvas instead.