I'm trying to embed multiple fonts in a spark RichText component but not sure how to go about it. I'm wanting to be able to display bold font using tags in HTML. With the font i'm using, the regular and bold character sets are in different .ttf files.
Can I set more than one font family in CSS for a component?
Here is my stylesheet so far...
#font-face {
src: url("/styles/fonts/FontRg.ttf");
fontFamily: FontRg_CFF;
fontStyle: normal;
fontWeight: normal;
embedAsCFF: true;
}
#font-face {
src: url("/styles/fonts/FontRgBd.ttf");
fontFamily: FontRgBd_CFF;
fontStyle: normal;
fontWeight: normal;
embedAsCFF: true;
}
s|RichText{
font-family: FontRg_CFF;
font-size: 16;
}
Thanks for any help!
Though this post is pretty old, I just had the same issue and could figure out how it works:
You will have to change the following in order to display the bold text:
#font-face {
src: url("/styles/fonts/FontRgBd.ttf");
fontFamily: FontRg_CFF;
fontStyle: normal;
fontWeight: bold;
embedAsCFF: true;
}
So, fontFamily and fontWeight need to be changed like you see above. Both embeds need to share the same fontFamily name whereas the bold font needs to have the fontWeight being set to "bold".
You can then simply use b-tags (<b>BOLD</b>) to display bold text within Flex RichText or TextArea.
I notice that in both of your font declarations you have only embedded the normal weight. Try another font declaration for the bold version.
Related
So I can specify my fonts in my website style CSS, and then set the font-family:
#font-face {
font-family: "custom-helvetica";
src: url("/assets/HelveticaNeue.ttf");
src: url("/assets/HelveticaNeueBold.ttf");
src: url("/assets/HelveticaBlkIt.ttf");
}
#font-face {
font-family: "custom-tahoma";
src: url("/assets/Tahoma.ttf");
src: url("/assets/Tahomabd.ttf");
}
html {
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
Here's an example piece of text:
Testing glyphs in PHP: ± µ ⁓ â ฿ ₿
So let's suppose that the font Helvetica contains all the glyphs in the example apart from ±, µ, ⁓ and that the font Tahoma contains all the glyphs in the example apart from â, ฿, ₿. Let's suppose that the font Arial contains every glyph in the example.
How does PHP/CSS work with this?
Will it apply Tahoma to the example and get this result? -
Testing glyphs in PHP: ± µ ⁓ ࠀ ࠀ ࠀ
Or will it decide that Arial is the only font that can render the entire string correctly, and apply that font to the whole string? Or will the font change dynamically throughout the string to adapt to any missing glyphs?
I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
I'm struggling with SuperTabNavigator coz I'm not able to change the tab text's font.
My font is a OTF embedded in the application via #face-font syntax in my style sheet, and I have used this successfully in other places e.g. spark label.
Then I have defined a style for the SuperTabNavigator referencing the aformentioned font both in term of fontStyle and fontFamily.
No result achieved.
Could you please provide the correct way to change tab text's font in the SuperTabNavigator component?
Thanks in advance
Best Regards
Try to modify CSS the SuperTabNavigation
#font-face {
src:url("./fonts/YOURFONT.TTF");
fontFamily: myFont;
}
#font-face {
src:url("./fonts/YOURFONT.TTF");
fontWeight: bold;
fontFamily: myFont;
}
SuperTabNavigator {
popupButtonStyleName: "popupButton";
tabStyleName: "firefoxLikeTabs";
leftButtonStyleName: "leftButton";
rightButtonStyleName: "rightButton";
buttonWidth:20px;
font-family: "myFont";
font-size: 11;
}
I'm trying to embed a font using css on in my flex project via CSS:
#font-face {
src: url("/slimCurves.ttf");
fontFamily: SlimCurves;
embedAsCFF: true;
font-weight:normal;
}
.slimCurves
{
fontFamily: SlimCurves;
fontLookup: embeddedCFF;
fontSize: 15px;
}
When I try to apply the style to a text input field the input field looses its existing style, but doesn't seem to inherit the custom one.
<s:TextInput width="100%" fontSize="33" text="test" styleName="slimCurves"/>
If I apply the same style to a label, the label shows the text in the custom font as would be expected. Any ideas?
Looks like this had something to do with the selected theme. Selecting a different template seems to have resolved this issue.
I think the problems is due to the fact that Buttons Text is by default in BOLD.
You are creating only the normal Font and not the bold one.
I usually use this code:
#font-face{
src: url("FONT.TTF");
fontFamily: DAX2;
font-weight:normal;
}
#font-face{
src: url("FONT.TTF");
fontFamily: DAX2;
font-weight:bold;
}
Kind regards,
Claudio
I'm using Flex 4. I'm trying to apply a embedded font in all Alert components of the application, to get the same style that all the app, of course.
I code in my CSS file:
#font-face
{
fontFamily: "Trebuchet MS";
src: url("resources/Trebuchet MS.ttf");
embedAsCFF: true;
}
mx|Alert{
font-family: "Trebuchet MS";
}
s|ButtonBase, s|TextBase, s|TextInput, mx|Label{
font-family: "Trebuchet MS";
color:"#000000";
}
The font-family worked to all componentes, but not to the Alert component. In alert the text message and title got unvisible. If I change to other font-family it works correctly, just the embedded font doesn't work on Alert component. Anyone got this problem?
Obs: The embedded font worked in all the app, just the Alert no.
Notice that Alert is a MX component, not a Spark component.
MX components don't handle Device 4 fonts by default.
To make it work, you have to change the textFieldClass for MX components :
mx|global
{
textFieldClass: ClassReference("mx.core.UIFTETextField");
}