freeCodeCamp/guide/portuguese/certifications/responsive-web-design/basic-css/import-a-google-font/index.md

1.4 KiB

title localeTitle
Import a Google Font Importar uma fonte do Google

Importar uma fonte do Google

Solução


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 
 <style> 
  .red-text { 
    color: red; 
  } 
  h2 { 
    font-family: Lobster; 
  } 
  p { 
    font-size: 16px; 
    font-family: monospace; 
  } 
 </style> 
 
 <h2 class="red-text">CatPhotoApp</h2> 
 <main> 
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p> 
 
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 
 
  <div> 
    <p>Things cats love:</p> 
    <ul> 
      <li>cat nip</li> 
      <li>laser pointers</li> 
      <li>lasagna</li> 
    </ul> 
    <p>Top 3 things cats hate:</p> 
    <ol> 
      <li>flea treatment</li> 
      <li>thunder</li> 
      <li>other cats</li> 
    </ol> 
  </div> 
 
  <form action="/submit-cat-photo"> 
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> 
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> 
    <label><input type="checkbox" name="personality" checked> Loving</label> 
    <label><input type="checkbox" name="personality"> Lazy</label> 
    <label><input type="checkbox" name="personality"> Energetic</label><br> 
    <input type="text" placeholder="cat photo URL" required> 
    <button type="submit">Submit</button> 
  </form> 
 </main>