How to incorporate multiple fonts into spark RichText using CSS - Flex edition!

I'm currently facing a challenge with embedding multiple fonts in a spark RichText component. Specifically, I am unsure about how to proceed with displaying bold font using <b> tags in HTML. The font I am working with has separate regular and bold character sets stored in different .ttf files.

Is it possible to define more than one font family in CSS for a single component?

Below is a snippet of my current stylesheet...

@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;
}

Any assistance on this matter would be greatly appreciated!

cssapache-flexfontsembed

Answer №1

Even though this post is from a while back, I recently encountered the same issue and managed to find a solution: To display bold text, you need to make the following changes:

@font-face { 
    src: url("/styles/fonts/FontRgBd.ttf"); 
    fontFamily: FontRg_CFF; 
    fontStyle: normal; 
    fontWeight: bold; 
    embedAsCFF: true; 
}

Simply adjust the fontFamily and fontWeight as shown above. Both font embeds should use the same fontFamily name, with the bold font specifically set to a fontWeight of "bold".

After making these changes, you can easily use b-tags (<b>BOLD</b>) to display bold text in Flex RichText or TextArea components.

Answer №2

I've observed that both of your font declarations include only the normal weight. Consider adding a declaration for the bold version as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Implementing a responsive full-screen menu using Bootstrap for optimal user experience

I've implemented navbar-fixed-top and I want my menu items to expand to full width below the navbar when the user clicks on the burger-icon. The expanded menu should cover the entire height of the screen, and the burger-icon should transform into an ...

csstwitter-bootstrap

Transition color seamlessly from the left side to the right side upon hover

Here is a simple code snippet for creating a line that changes color on hover: li::after { height: 2px; display: block; background: rgb(195, 195, 195); border-right: 1px white; content: ''; } li:hover:after { position: relative; ...

cssanimationtransition

The Intersection Observer fails to function properly with images

I recently discovered that images require different intersection observer code than text in order to function properly. After making the necessary changes to the code, my intersection observer is behaving quite oddly. As I scroll down, the image stays hidd ...

javascripthtmlcss

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

What is the best way to position elements on a bootstrap card?

Welcome to my first post! I'm currently experimenting with Bootstrap 5 to create some stylish cards. One of the challenges I'm facing is achieving uniform width and height for all the cards. Specifically, I want all my cards aligned based on a ...

cssbootstrap-5

Creating dynamic PDFs with automatically adjusting heights in DOMPDF Learn how to make

It seems like this question may not have a straightforward answer, but let's give it a shot. My goal is to collect various information from users on my website and display it in an HTML template file that will later be converted into a PDF. With user ...

htmlcsspdfheightdompdf

Comparing currency to double in handlebars: a comprehensive guide

I've been working with Handlebars.js and encountered an issue when trying to compare product prices above $35. The problem arises from the fact that prices are stored as "$54.99" which gets treated as 0 when compared to a number. How can I effectively ...

htmlcsshandlebars.jsbigcommerce

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

I recently added a new menu option to my Angular 7 project, but it's not functioning correctly. I used Bootstrap 4 and followed this example from here. Can anyone help me figure out the correct way to implement this? Check out the sample on StackBlit ...

cssangularbootstrap-4angular7

Tips for aligning text vertically in flexbox arrangements

As I work on building my portfolio, I have implemented links as buttons using flexbox to make responsiveness easier. The height of these flexboxes is set dynamically using JavaScript with percentages. Despite trying various suggestions, none of them provi ...

javascripthtmlcssflexbox

What is the best way to handle HTML files that have the same name as folders?

I am looking to incorporate a News section on my website with the unique URL: mysite.com/news Each news article should be stored in a specific folder named "News" like this: mysite.com/news/2021 However, when I attempt to access the news.html file (witho ...

htmlcss

Ensuring consistent column height in HTML Tables

Hey there, I'm just starting out with CSS and I have a question about table design. I have three separate tables below and I want to ensure that all the columns in each table are of equal height. Is there an easy way to achieve this? Any suggestions o ...

htmlcss

spacing between text and bottom border

Is there a way to add space between text and the border below, as shown in the image linked? I'd like the space to be 5px with a font-size of 15px. My attempt: .selected { color: #284660; } .selected:after { content: ''; position: a ...

htmlcss

How to vertically center text with button label in Bootstrap 4

I have a simple objective: I want to align a line of text to the left and a button to the right, with the text vertically aligned to the button's label. I've tried adjusting padding and margins without success. I feel like there must be an easy s ...

htmlcsstwitter-bootstrapbootstrap-4

Achieve a main-menu container with a full width dropdown using Bootstrap 4

I want the dropdown to start from the initial position for all menus and maintain a width of 600px. Even if I attempt to open the dropdown for "Main Menu 2" or "Main Menu 3" or "Main Menu 4", the dropdown should always start from the position of "Main Men ...

cssangulartwitter-bootstrapbootstrap-4

The Colorful World of CSS Backgrounds

I've been searching for hours trying to track down the source of this strange greenish background color. I've combed through every single file and it's starting to drive me insane. Any ideas where this color could be coming from? I highly d ...

javascripthtmlcss

What's the best way to position menu items vertically in a navbar?

I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...

htmlcsstwitter-bootstrap-3

Issue with onClick function causing failure to generate options in select menu

function getOption(){ var select = document.getElementById("dynamic-select"); if(select.options.length > 0) { var option = select.options[select.selectedIndex]; alert("Text: " + option.text + "\nValue: " + option.value); ...

javascriptjqueryhtmlcssbootstrap-4

What is causing these headers for the children not to center properly?

I am trying to centrally align both vertically and horizontally the <div> element, with its child elements <h1> and <h2> being horizontally centered in relation to the parent <div>. To achieve this, I have created a specific class f ...

htmlcsscentering

Switching the placement of my menu bar to the other side of my logo

Can anyone help me figure out how to move my menu bar to the opposite side of my logo? I attempted using the position relative in CSS but it didn't reposition correctly. I've included the position:relative in the CSS code of my HTML index file, ...

htmlcss

Position the image at the center above the text

I am trying to position multiple images side by side, with each image having a date displayed beneath it. The challenge I am facing is that the length of the date extends beyond the width of the image, and I would like to center the image on top of its c ...

htmlcss