CODEWITHSUNDEEP
htmlcssfonts
Tomislav Nikolic
Tomislav Nikolic

Reputation: 193

Changing global font

Alright so I have a font that I use for absolutely everything on my page (besides the logo)

* {
    margin: 0;
    padding: 0;
    font-family: 'Titillium Web', sans-serif;
}

Now I want to apply a different font on another piece of text but its not replacing the original one

<h1 style='font-family: "Aref Ruqaa", serif;'>Logo Text</h1>

TLDR: How do I make it apply a different font on that H1? I tried using font-family initial and then setting a different font but nothing works out.

Example: http://codepen.io/anon/pen/BQOaXo

Upvotes: 1

Views: 218

Answers (3)

G. So&#243;s
G. So&#243;s

Reputation: 47

I think you change the global font, you use this syntax the in css file:

h1 { font-family: Aref Ruqaa, sans-serif; }

Upvotes: 0

Johannes
Johannes

Reputation: 67799

Just use this in the CSS:

h1{
  font-family: 'Aref Ruqaa', sans-serif;
}

http://codepen.io/anon/pen/mOGybb

Upvotes: 0

user7234396
user7234396

Reputation:

Add classes to the html elements and make sure those classes load after you global font.

Avoid inline styling.

@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 400;
  src: local('Yrsa'), local('Yrsa-Regular'), url(https://fonts.gstatic.com/s/yrsa/v1/HvXbkSMs7hgg2r-HiCNOmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v8/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body {
  background: #111;
  color: #999;
  text-align: justify;
  text-justify: inter-word;
  max-width: 80%;
  margin: 10%
}
* {
  font-family: 'Yrsa';
}
.other {
  font-family: 'Indie Flower';
}
<body>
  <div>
    <h1>This is a Header 1 in font A</h1>
    <h1 class="other">This is a Header 1 in font B</h1>
    <h2>This is a Header 2 in font A</h2>
    <h2 class="other">This is a Header 2 in font B</h2>
    <h3>This is a Header 2 in font A</h3>
    <h3 class="other">This is a Header 2 in font B</h3>
    <p>This is a paragraph using font A
      <br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
      aperiam forensibus an nam.</p>
    <p class="other">This is a paragraph using font B
      <br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
      aperiam forensibus an nam.</p>
  </div>
</body>

Upvotes: 1

Related Questions