sidneiweber
5/21/2014 - 8:21 PM

fonte-face.html

fonte-face.html

fonte-face.html
content_copyfile_download
<!doctype html>
<html>
  <head>
    <!-- 
    Author: Sérgio Luiz Araújo Silva
    Licence: GPLv3
    Created: 2014-03-17 14:37
    Last Change: 2014-03-17 16:40
    purpose: Show you how use @font-face from google fonts directory
    site: vivaotux.blogspot.com
    mail: voyeg3r at gmail
    -->
    <link href='https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Average" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
    <style TYPE="text/css">
    h1 { font: 400 60px/1.3 'Abril Fatface', Georgia, serif; }
    h2 { font: 30px 'Abril Fatface', Georgia, serif;}
    /* p {font-family: 'Sorts Mill Goudy', serif;} */
    p { font-family: 'Cardo', serif; font-size: 30px;}
    /*p { font: 400 30px/1.6 'Average', Garamond, Georgia, serif; } */
    /*.pre {font-family: 'Ubuntu Mono', sans-serif; font-size: 13px; } */
    .pre {font-family: 'Old Standard TT', serif;}
</style>
  	<meta charset="utf-8">
    <title>Sua Webpage incrível criada no Seg, 17 de Mar de 2014 16:50</title>
  </head>
  <body>
    <h1> Mais beleza na Web </h1>
    <h2> Como usar @font-face </h2>
    <p>
      Faça algo incrível com a web <em>Acesse:</em> 
      <a href="https://www.google.com/fonts#">https://www.google.com/fonts#</a> 
      e procure a fonte que mais lhe agradar, 
      em seguida clique no canto inferior direito no link com o nome "use". 
      Na página que abre siga os passos:
      
      <ul> 
        <li>Escolha o tipo de fonte, no caso a que você clicou.</li>
        <li>Escolha o conjunto de caracteres, em geral o que já vem marcado será suficiente.</li> 
        <li>Copie o link do estilo para o cabeçalho do seu código html.</li> 
        <li>Dentro do seu css coloque as formatações com base na fonte escolhida. tipo <em> font-family: 'Abril Fatface', cursive; </em></li>
      </ul>
          
    </p>
        <p>Outro exexpcional recurso que eu recomendo é o script 
        <a href="https://github.com/typekit/webfontloader">webfontloader</a>, com 
        esse script você obtém maior controle sobre o recurso @font-face, podendo usar 
        múltimplos repositórios de fontes.
    </p>
    <p>
      A fonte do título é "Abril Fatface" e a fonte do corpo do texto 
      é a fonte "Cardo", há outras possibilidades, veja o código fonte postado no <a href="https://gist.github.com/voyeg3r/9604296">github</a>. 
    </p>
  </body>
</html>