Skip to content

Instantly share code, notes, and snippets.

@voyeg3r

voyeg3r/@font-face.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save voyeg3r/9604296 to your computer and use it in GitHub Desktop.
Save voyeg3r/9604296 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
@font-face.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment