I'm using a CSS style sheet with a style class like this:
.sublabel {
-fx-font-style: italic;
-fx-font-size: 12;
}
...which has been set as the Label's Style Class in Scene Builder. The font size changes as expected (smaller, since I have -fx-font-size: 14; under the .root class but this is the only font-related setting). Bold style works fine, but it refuses to use an italic font. I'm not using a custom font anywhere, so this should be using the default font JavaFX 8 uses on Win7. I've also tried setting it under Style independently.
What could cause the style request to be ignored?
The default font in JavaFX, "system", does not support italic. You can even choose italic in SceneBuilder, but it will only work for fonts that support it.
Try using a TrueType font, e.g. Verdana, then it should work without problems.
Either use the style version below, or the more direct: Font name="Verdana Italic"
<Button style="-fx-font-style: italic;" text="Button">
<font>
<Font name="Verdana"/>
</font>
</Button>
Related
If text is styled as bold or italic and the typeface family does not include a bold or italic font, Editors and IDEs will compensate by trying to create synthetic bold and synthetic italic styles themselves.
This first image show the original font rendering (font is JetBrainsMono-light) in VSCode.
The second image show the faux bold font rendering in VSCode by setting "editor.fontWeight": "bold" in settings.json.
I prefer the faux bold font rendering instead of the original JetBrainsMono-Bold or JetBrainsMono-SemiBold. So, i want to know how to export this kind of font rendering to a .ttf file with the aim of applying the generated font to other editors and IDEs.
Firstly introduce the font file in css
Important:- Convert the ttf to woff and woff2 to eradicate any slightest of issue.
#font-face {
font-family: myFirstFont;
src: url(faux.woff);
}
*Include the woff2 file to in the similar way. (Optional)
And in HTML use the following snippet:
div {
font-family: MyFauxFont;
}
Now accordingly change the font size, weight, color in CSS etc.
i have the below simple code
test content
and
css code
label{
font-family: "Andale Mono"
}
whatever font we added font style is not changing for the label content , any suggestion please.
Try?
<font face="Andale Mono" color="Black">
Also did you include a link to Andale Mono in the tag?
Use it or try to apply using ID/CLASS
label
{
font-family:"Andale Mono",Georgia,Serif;
}
Hope it will work.
I find that, Andale Mono is not a google font. So, in that case, you have to manually add the font to your project using #font-face. See this for reference: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp .
And another thing.. for changing the font for a label element, you have to follow the main syntax of font-family.
Suppose:
label {
font-family: 'Roboto', sans-serif; // A google font
}
Here, 'Roboto' is A font family name and 'sans-serif' is a generic family name. You have to put both, a family name and a generic family name.
It worked for me.
Some of you already know, Safari on Mac change the font face to default
if the font set on the page is not available.
I want to change the default font on Safari by setting css file in it.
Is there any command set default font on any page in css?
You can include multiple fonts in the font-family attribute: if one isn't available the next one in the list is used. For example, this will use Arial if "custom font"isn't available:
html {
font-family: "custom font", Arial;
}
I am using an own custom font which I embed like this:
#font-face{font-family:myFont;src:url(css/fonts/myFont.woff);}
#font-face{font-family:myBoldFont;src:url(css/fonts/myBoldFont.woff);}
So, when ever I want to use bold font, I do:
<style>
.bold{
font-family:"myBoldFont";
}
</style>
<div class="bold">Hello world</div>
Also, I need to overwrite all css definitions that use bold typography by default:
<style>
strong,h1,h2,h3,h4,h5,h6,h7,h8{
font-family:"myBoldFont";
font-weight:normal;
}
</style>
As you can see, I must set font-weight:normal because if I'd set font-weight:bold the browser would not find the right font and do a fallback because there is no definition for "bold" in this .woff file.
So, this works quite well for browsers that do support #font-face and .woff files. For browsers that do not, like e.g. older iOS devices, I need to set a fall-back like this:
font-family:"myBoldFont",helvetica,arial,sans-serif;
So, the fallback to helvetica works, but the text is not bold, because font-weight:normal is set.
Now, here is the problem:
If I set font-weight:bold then browsers that can handle woff files
will fall back to a default font instead of using the one I defined
via the woff file.
If I set font-weight:normal then older browsers that cannot handle
woff files won't be able to print text bold.
What should I do?
Have you tried the following : How to add multiple font files for the same font? ?
The #font-face property allows you to specify for which styles to apply the font.
I'm trying to embed a font in my project by using url("font.ttf") rather than local("Font Name"), but it doesn't seem to pick it up. The font in question is called "Gotham Bold". When i view the details of the font, the font weight is regular, however when i use local("Gotham Bold") in the css i have to specify fontWeight: bold or else it wont pick it up. But when I use url("folder\Gotham-Bold.ttf"), and specify fontWeight: bold, it says that font weight is not found for that TTF. If i remove the fontweight, there's no errors, but the font is not applied to the text. any ideas please?
Thanks
I use this code to embed a custom Font in my Flex App. I placed this code directly in mx:Application.
I have found two different file one for the normal weight and one for the bold.
<mx:Style>
/*S!_DCB__.TTF*/
#font-face{
src: url("S!_DC__.TTF");
fontFamily: DAX2;
font-weight:normal;
}
#font-face{
src: url("S!_DCB__.TTF");
fontFamily: DAX2;
font-weight:bold;
}
</mx:Style>
After that i just put the DAX2 font name in the component.
Claudio.
Fonts may not actually being embedded in your code. One more thing, You must embed distinct font for different styles. as per say, If you want to embed Arial with Normal and Bold style, you have to embed Arial twice with different class names given.
To embed font use
[Embed(source = "path of font file.ttf", fontName = "Gotham-Regular", mimeType="application/x-font-truetype")]
private var fontGothamRegular:Class; //Class name which would be used to register font
//To register font
Font.registerFont(fontGothamRegular);
//For embedding bold style of same font
[Embed(source = "path of font file.ttf", fontWeight="Bold", fontName = "Gotham-Bold", mimeType="application/x-font-truetype")]
private var fontGothamBold:Class;
Font.registerFont(fontGothamBold);