Postei um código no github com um exemplo, você pode baixar o código para sua máquina e visualizar o código ou ainda vê-la rodando neste link: https://voyeg3r.makes.org/thimble/font-face
Segue portanto o código:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
