how to use unicode fonts in java fx combobox? The resaon is font type like windings are not getting displayed on combobox. Can anyone help out on this?
For unicode symbols use "\u+code" , e.g. "\u2705".
Fonts are specified with -fx-font-family: Fontname;
More examples for (external) fonts can be found here.
However, according to the bug tracker fonts like wingdings can't be used. But there are some similar symbols in unicode: link
Related
I just started using Brackets, an IDE that I really love. However, I have encountered a problem with the "font-family". It only has six fonts— cursive, inherit, sans-serif, serif and monospace. So please, how can I go about it to have more useful fonts in the IDE?
Fonts are not related to your IDE. In your css the font family lets you pick the font you want and fallbacks in case the first font is not installed. Either you can use generic fonts that are installed by default on OS or you can link them in your html file using Google font for example.
Here is some documentation about it
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
I've got a font rendered on webkit (specifically in the text editor "Nano") and I'd like to display an OTF font that has a variant called "Garamond Premier Pro Italic Display". I believe it's a "suitcase" font.
Here's what the font looks like in Font Book:
Things I've tried:
font-variant-alternates: character-variant("ItDisp");
and
font-variant-alternates: character-variant("Garamond Premier Pro Italic Display");
No dice.
Any thoughts here? Or is this just not possible?
Unfortunatly this is not possible on the web at the time of writing.
The only real options available to use are as follows:
italic
normal
oblique
You can read up on the font-style attribute and the different things you can do with it here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
There are /MANY/ fonts on desktop platforms that simply will not work on the web, as the web use different file formats. It is recommended to use fonts that are specifically designed for use on the web.
Also a note that font-variant-alternates is only supported in Firefox 34+ and Safari, and as such should not be used in production.
First, I want to mention that the icon fonts are not freely available ones. We actually purchased them.
I have a SCSS file that is making references to some icon fonts. I get most of it but not sure what the seemingly hexadecimal values mean.
$icomoon-font-path: "../fonts" !default;
$stream-check-1: "\e62f";
$stream-check-circle-1: "\e634";
I then seem to have CSS classes that reference these values:
#font-face {
font-family: 'myicon';
src: url('#{$icomoon-font-path}/streamline.eot?l1dykt');
src: url('#{$icomoon-font-path}/streamline.eot?l1dykt#iefix') format('embedded-opentype'),
url('#{$icomoon-font-path}/streamline.ttf?l1dykt') format('truetype'),
url('#{$icomoon-font-path}/streamline.woff?l1dykt') format('woff'),
url('#{$icomoon-font-path}/streamline.svg?l1dykt#streamline') format('svg');
font-weight: normal;
font-style: normal;
}
.myicon-check-1 {
&:before {
content: $stream-check-1;
}
}
I think I get most of it. My question is where do I get those hexadecimal values e.g. e62f?
UPDATE:
I've located some json files that are zipped up in file that mentions icomoon. Would these json files be of any help in this case? They look like this:
"\e62f" is CSS syntax for what would be in HTML: a character with hexadecimal code e62f. You can see the code-to-glyph mapping by inspecting your font file (the way to do this will differ based on what OS you are using).
I think I found the right solution here. It's an online font viewer and when I click on the font, it shows the assigned value.
Just drag and drop the font file and
it shows you the fonts and their values.
http://jsfiddle.net/iegik/r4ckgdc0/
Those are utf-8 icons. You can check them here.
For further lookup, check this.
That e62fis actually referring to the utf-8 encoding of characters. The HTML takes that "code" and turns it into a letter depending on what encoding you have. Most American websites I know of are just the utf-8
In your case, your webfont has replaced some of the normal values in order to use their own version of it. However, you might not be able to find the exact list of what other codes there are in this font as it's an Icomoon font (it appears to be) - which allows people to make their own webfont.
EDIT:
So if you have the font downloaded and have a mac - open up your Font Book Application. From there, find your font and look at all the characters. Choose the character you are looking for and copy it.
Go to a tool like this website: http://r12a.github.io/apps/conversion/
And paste your character into the green convert area.
The value that you are looking for will be in the css box! (Of course it will show up as a box on this site, but as soon as you use that code on a site where you have the font downloaded - you'll see it match what you saw in Font Book)
I was able to reproduce this with my own custom font - so I was able to make it work. This was a great question and helped me find a tool that I'm definitely going to book mark! Cheers!
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.
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.