Implementing @Font-Face in C# Code Behind

Within my stylesheet, I have defined the following:

@font-face {
    font-family: 'light';
    src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}

Now, in my C# code behind, I am attempting to assign the class like so:

row.CssClass = light;

However, I am encountering a compile error:

The name 'light' does not exist in the current context

My question is whether it is feasible to reference a CSS class with @font-face directly from C# codebehind.

UPDATE
This is my latest attempt at using this - I have experimented with the following:

.lightfontface {
    font-family: 'light';
}


@font-face {
    font-family: 'light';
    src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}

row.CssClass = lightfontface;

Answer №1

I think you should update your

row.CssClass = light;

to

row.CssClass = "className";

and ensure that your CSS contains a .className declaration.

Picture your HTML row:

<tr class="className">stuff</tr>

By assigning the value to class in your CssClass assignment, you can format that row using a class selector in your CSS.

To summarize some of the suggestions, your style sheet entry should look like:

.className { font-family: 'light'; }

The order of entries in your style sheet matters. Make sure the font-face definition comes before the .className style entry. Check: https://www.w3.org/TR/CSS2/cascade.html#cascading-order

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

Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component. <div class="list-container"> <div class="row"> <div class="content"> Sample Content 1 </div> <div class="action"> ...

How can I center an image next to text on two lines, that is compatible with IE7?

I am trying to align an image (logo) with text in two lines - the website title and a brief description. Here is my attempt using HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...

Transformation of CSS classes in React with Webpack

Have you ever noticed that when you inspect the Airbnb website, the classnames appear to be morphed into single alphanumeric names? What is the name of this technique and is it applied at the code level or build level? https://i.sstatic.net/qSiaj.jpg ...

How come @keyframes animations do not seem to cooperate with Vue.js?

I'm attempting to create a flashing link upon site load, but I'm encountering issues with the animation not working in Vue. Interestingly, when testing the same code without Vue in a separate file, it functions perfectly fine. Below is the spec ...

Is it possible to have the cursor rotate or animate by 45 degrees when clicked

Do you know how to create a unique custom cursor using CSS? Say, for example, we have this code: cursor: url(images/cursor.png) 15 15, auto; Now, what if we wanted to take it up a notch and make the cursor rotate -45 degrees when clicked, and then revert ...

Tips for positioning the footer at the bottom of the page

During the process of constructing a new website, I included a footer that is neatly positioned at the bottom of my screen. https://i.sstatic.net/HgAbY.png However, I noticed that on pages with minimal content, the footer does not remain fixed at the bott ...

Can we integrate Bootstrap 5 icons into Bootstrap 4?

Looking to incorporate Bootstrap 5 icons into a Bootstrap 4 project, as mentioned in the title. This is necessary because I have an older web application that relies on Bootstrap 4 and Font Awesome, and I need it to integrate smoothly with a new Bootstrap ...

Adding the !important rule in React inline CSS effortlessly

Is there a way to include !important in my inline CSS property without disrupting the entire style? import React from "react"; export default class Todo extends React.Component { render() { const {text} = this.props; const cardStyl ...

The z-index issue with Bootstrap modal is not being resolved on Firefox and Internet Explorer

I am encountering an issue with my bootstrap modal that includes a jquery datepicker. Specifically, the datepicker is styled as follows: .datepicker{ z-index:1000;} Interestingly, it functions perfectly on Google Chrome, displaying like this: However, ...

A single entity object cannot be shared across multiple instances

I am encountering errors while trying to add objects to the database. Here is the specific error message: An exception of type 'System.InvalidOperationException' occurred in System.Data.Entity.dll but was not handled in user code Addi ...

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="plugins/magnific-pop ...

Dynamic website featuring fixed background with content transitioning through clicks or scrolls

Seeking a template or tutorial on how to create a website similar to the following examples: The desired website layout would allow users to scroll through content while keeping the background neutral, with the option to click links that transition to new ...

Does CausesValidation validate all validators, including validation groups?

I have encountered an issue with my web page where I have 3 separate validation groups, but when I attempt to submit the form, I want all of the groups to validate simultaneously. It appears that using causesValidation="true" on the button does not trigge ...

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

The script ceased functioning immediately following the inclusion of a case-insensitive search feature and interactive images

In the process of creating my inaugural project featuring a collection of images, I wanted to include a filter/search bar at the top. This bar would dynamically filter the displayed pictures based on user input. For example, typing "Aatrox" into the search ...

Application of id missing on all buttons in Bootstrap tour template

I'm having an issue with applying a new id to the next button in a Bootstrap tour template. I added the id to the button, but it only seems to work for the first stage and not the subsequent ones. Can anyone provide insight into why this might be happ ...

What is the best way to share CSS styles between React and React Native?

Is it recommended to use inline CSS styles in a React / Next.js app to maintain code consistency across projects? For example, like this: import {StyleSheet, Dimensions} from 'react-native'; const vw = Dimensions.get('window').width / ...

Creating a Facebook-style comment box in ASP.NET using a repeater widget

My current setup includes a repeater with two columns: one containing a label and the other a textbox. However, I am facing an issue. Upon entering data into the textbox, it should display as a label, and another textbox in the same row should appear. I ...

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

Creating a custom backdrop for your kaboom.js webpage

I created a kaboom.js application and I'm having trouble setting a background for it. I've searched online extensively and attempted different methods on my own, but nothing seems to be working. (StackOverflow flagged my post as mostly code so I ...