CODEWITHSUNDEEP
htmlcssfontsstyles
Raelynn Zhang
Raelynn Zhang

Reputation: 1

Font Style does not change after adding style

I tried to change the font to a <h1> tag in bootstrap css; here is the original code:

<h1 class="text-center"> My Site </h1>

I tried the following:

<h1 class="text-center" style=font-family: "Arial";> My Site </h1>
<h1 class="text-center" style=font-family: Aria;> My Site </h1>

However, none of which worked. I've tried with several basic fonts too, such as Verdana, Times New Roman, Courier etc.I very much appreciate it if someone can help me with my problem here.

Upvotes: 0

Views: 3631

Answers (4)

dapperdandev
dapperdandev

Reputation: 3289

Solution

The short answer to your question is that your HTML is invalid. Here is the quick and dirty solution.

<h1 class="text-center" style="font-family: Arial;"> My Site </h1>

This is called inline styling and it's generally frowned upon for several reasons, but that's outside the scope of this question.

Problems with the first example

Your code:

<h1 class="text-center" style=font-family: "Arial";> My Site </h1>

The quotes should contain all of the css in your style attribute. e.g., style="font-family: Arial;"

Problems with the second example

Your code:

<h1 class="text-center" style=font-family: Aria;> My Site </h1>

Again, the quotes need to contain the style within your style attribute. It also looks like you dropped the "l" from "Arial" (typo).

Upvotes: 0

Mehdi Ytr
Mehdi Ytr

Reputation: 52

Try this one :

<h1 class="text-center" style="font-family: "Arial";"> My Site </h1>

Upvotes: 0

Quentin
Quentin

Reputation: 943108

HTML attributes values which are not delimited by quote characters cannot have spaces in them. Add quotes.

<h1 class="text-center" style="font-family: Arial;"> My Site </h1>

This would have been picked up if you have used a validator.

NB: A stylesheet is prefered over style attributes. You might want to read an introductory guide.

Upvotes: 1

Sam
Sam

Reputation: 313

The way you change a font in CSS is by doing this:

h1.t {
  font-family: "Times New Roman", Times, serif;
  }
h1.a {
  font-family: "Arial", Helvetica, sans-serif;
  }
h1.c {
  font-family: "Calibri", Helvetica, sans-serif;
  }
<h1 class="t">Times New Roman</h1>
<h1 class="a">Arial</h1>
<h1 class="c">Calibri</h1>

There you go, you just need to know the family information, and you didn't have all the family info in there.

Upvotes: 1

Related Questions