Multiple font-weights, one @font-face query - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL

Description

Multiple font-weights, one @font-face query

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
@font-face {
   font-family:'DroidSerif';
   src:url('https://www.java3s.com/style/demo/Google-Chrome.png') format("truetype");
   font-weight:normal;
   font-style:normal;
}

@font-face {
   font-family:'DroidSerif';
   src:url('https://www.java3s.com/style/demo/Google-Chrome.png') format("truetype");
   font-weight:bold;
   font-style:normal;
}

section {<!--from  w ww  .  ja  v  a 2s.c om-->
   padding:3em;
   font-family:'DroidSerif';
}

section .two {
   font-weight:bold;
}
</style> 
 </head> 
 <body translate="no"> 
  <section> 
   <p class="one">Lorem ipsum dolor sit amet, conse</p> 
   <p class="two">Lorem ipsum dolor sit amet, consectet</p> 
  </section>  
 </body>
</html>

Related Tutorials