Set custom font dynamically from code behind

Question

User1587720337 posted

I want to set the custom font for asp<g class="gr_ gr_50 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="50" data-gr-id="50">:label</g> control by adding the button attributes,

lblHeaderFont.Attributes.Add("style", "font src: url('"+Convert.ToString(dtTheme.Rows[0]["HeaderFontName"]);+"' format('opentype');");

but its not working, any idea how to add the @font-face on button attributes.

Answer 1

User753101303 posted

Hi,

See https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp for the correct syntax. You have two parts :
- @font-face (which doesn't seems to appear here) is to load a font from a source and give it a name. It is not directly related to a particular element
- then you'll use the font name as any other local fon name

Here it seems you are kind of mixing both the font style and a @font-face rule. It seems you are using "Web Forms" rather than really https://www.asp.net/web-pages

You could use the https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlhead(v=vs.110).aspx control to inject the need font-face rules inse your (master ?) page.

Answer 2

User1587720337 posted

My only concern is how do I set the custom font that I have installed under the Windows Font folder, here what I am doing now

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Attributes.Add("style", "font-family: Holland.ttf");

}

protected void Button2_Click(object sender, EventArgs e)
{
Label1.Attributes.Add("style", "font-family: Bitter.ttf");
}

but it's not reflecting the changes. Any other way to do, I need to use through the code behind instead of the aspx page (using font-face)

Answer 3

User753101303 posted

If a font is already installed locally at the OS level it is just as any other local font and you should just use the font name (likely just 'Holland' and 'Bitter' ?)

My guess is that you want rather to use those fonts without forcing each and every user to download and install them manually on their own machine in which case you HAVE to use  @font-face.

Take one step at a time. As you seems new to this I would suggest to first make this work in  a simple non dynamic case using the earlier link. Just add a @font-face rule, use this font in your page and see what happens.  You may have also to configure your web server so that ttf files are allowed to be downloaded. See http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/

Once the basic @font-face mechanism works, move forward to do something dynamic if really needed (likely injecting the @font-face rule in the head of your page).