2016-12-11 16 views
1

よし変更ので、私は(ロゴ以外)私は私のページに、絶対にすべてのために使用するフォントを持っているグローバルなフォント

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

今私は、テキストの別の部分に別のフォントを適用したいが、そのは交換しません元のもの

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

TLDR:H1に別のフォントを適用するにはどうすればよいですか?私はfont-family initialを使い、別のフォントを設定しようとしましたが、うまくいきません。

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

+0

あなたがjsbinを共有したり、ここでは、この例 –

+0

でcodepenすることができますあなたがhttp://codepen.io/anon/pen/BQOaXoを行く –

+0

インラインスタイリングは、しかしグローバルプロパティをオーバーライドします。https://jsfiddle.net/AndrewL32/e0d8my79/171/ –

答えて

1

あなたグローバルフォント後に必ずこれらのクラスのロードを作るHTML要素とにクラスを追加します。

インラインスタイリングを避けてください。

@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>

+0

これは私が探しているものです。おかげで –

+0

うれしいです。どういたしまして –

0

私はあなたがこれはCSSファイルで構文を使用し、あなたがグローバルフォントを変更すると思う:

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

関連する問題