Stylising a font

[Blueie]

Hello

I have copied and pasted a font from my Windows fonts folder into my VB.NET fonts folder. What I would like to do is change the font-style and colour of the title 'Register' (please see attachment) from its current style/colour to the font I have imported.

The only reference I can see in my VB.NET project to the word 'Register' is here:

<%@ Page Title="**Register**" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Register.aspx.vb" Inherits="Account_Register" %>

I am referring to that 'Page Title'. Is it that which I need to change, and in which file would I change it, please, to my chosen font? In other words, which page at the moment (CSS) stylises that title 'Register'?

Thank you.

[JorgeM]

Line 1 which you showed in your post is part if the page declarations. The Page Title attribute listed there is the title assigned to the title in the browser tab, not the word register in your page content.

You can modify the look and feel of you page content using an external style sheet, or by using internal styles or inline styles.

[Blueie]

Hello Jorge

I have a working external style-sheet now!

I am not able to see 'Register' in Design View (attached). In the source code, I can see:

   <h2><%: Title %><span class="auto-style1" style="color: #FFFFFF">.</span></h2>
    <p class="text-danger">
        <asp:Literal runat="server" ID="ErrorMessage" />
    </p>

    <div class="form-horizontal">

So I need to stylise that auto-style1 class, don't I? There is no reference in Site.master to auto-style1.

Thanks again

[JorgeM]

Ok, now that you provided relevant code, i see how you are displaying the "title" in your conent. You are doing it programatically here...

 <h2><%: Title %><span class="auto-style1" style="color: #FFFFFF">.</span></h2>

If you look at this line in detail, you are wrapping all of the content in a "heading 2" element. The title is being displayed at run-time by this part: <%: Title %> After that, the span element is used to wrap the "period" and apply not only class, but it also has an inline style used to apply the color of white to the period.

You are not going to see the word "register" in design view because that word is placed at that location dynamically at run-time.

So I need to stylise that auto-style1 class, don't I? There is no reference in Site.master to auto-style1

"auto-style1" is the name of the class. You can style it via an internal or external stylesheet.

If its internal, the style properties are going to be located in the same page (or in the case of asp.net using a master page, you'll find it on the master page. The second option is that you'd apply style properties to that class on the external style sheet. On your master page, you would reference this external file in the head section of your master page.

You may find that you are not styling this class on the internal or external stylesheet. That's OK. Just because you have a class assigned to an element doesnt mean that there will be style properties applied, but 99% of the time, you would. There are other reasons why you apply a class to an element besides adding styles.

[Blueie]

Hello Jorge

Thanks again. So something like this in my external CSS:

@font-face { 
  font-family: Jenna Sue; 
    src: url('../fonts/JennaSue.eot'); 
    src: url('../fonts/JennaSue.woff');    
    src: url('../fonts/JennaSue.ttf'); 
    local("Jenna Sue"), 
}

h2.auto-style1 {
font-family: JennaSue; 
font-family: JennaSue, Arial, Serif;
color: #E93AE7;
float: left;
margin-left: 250px;
margin-top:30px;
display: inline-block;
font-size: 400%;
}

And this in my aspx file(s):

<h2><%: Title %><span class="auto-style1" style="color: #FFFFFF">.</span></h2>

[JorgeM]

Yes something like that but specifically with your style on that class you are only applying it to the period since the class is assigned to the span element.

You can try stying the entire h2 element.

 h2 { property: value; property: value; }

[Blueie]

I have tried the following and a combination of the following:

/*@font-face { 
font-family: JennaSue; 
src: url('../Account/fonts/JennaSue.eot'); 
src: url('../Account/fonts/JennaSue.woff');    
src: url('../Account/fonts/JennaSue.ttf'); 
src: local("Jenna Sue"), 
}*/

/*@font-face { 
font-family: "Jenna Sue"; 
src: url('~/Account/fonts/JennaSue.eot'); 
src: url('~/Account/fonts/JennaSue.woff');    
src: url('~/Account/fonts/JennaSue.ttf'); 
src: local("Jenna Sue"), 
}*/

@font-face { 
font-family: "Jenna Sue"; 
src: url('JennaSue.eot'); 
src: url('JennaSue.woff');    
src: url('JennaSue.ttf'); 
src: local("Jenna Sue"), 
}

/*h2{
font-family: "Jenna Sue"; 
font-family: JennaSue, Arial, Serif;
color: #E93AE7;
float: left;
margin-left: 100px;
margin-top:30px;
display: inline-block;
font-size: 400%;
}*/

h2{
font-family: JennaSue; 
font-family: JennaSue, Arial, Serif;
color: #E93AE7;
float: left;
margin-left: 100px;
margin-top:30px;
display: inline-block;
font-size: 400%;
}

But VS (2013) does not like them - the font-family has not changed. Does VS have a particular preference about embedding fonts?

Thanks

[JorgeM]

I've only briefly played with custom web fonts. I believe you are only going to see the results at run time not in the designer.

Take a look at this tutorial with examples on how to implement web fonts.

http://www.w3schools.com/css/css3_fonts.asp