68 lines
2.6 KiB
Markdown
68 lines
2.6 KiB
Markdown
|
---
|
||
|
|
title: Where to Get Fonts
|
||
|
|
localeTitle: Onde obter fontes
|
||
|
|
---
|
||
|
|
## Onde obter fontes
|
||
|
|
|
||
|
|
Os serviços de fontes on-line, como o Google Fonts ou o Font Squirrel, fornecem uma maneira fácil de usar fontes diferentes no seu site sem a necessidade de se preocupar se a pessoa que está visualizando o site terá ou não a fonte disponível no sistema.
|
||
|
|
|
||
|
|
### Fontes baixadas
|
||
|
|
|
||
|
|
Sites como o Font Squirrel permitem que você baixe os arquivos de fontes escolhidos. Uma vez feito isso, você tem que enviá-los no servidor que hospeda seu site. Para usá-los, você precisa declará-los em sua folha de estilos CSS, o que significa dizer ao seu CSS que peça ao navegador do usuário para exibi-lo. Declare que uma fonte geralmente é feita usando `@font-face` no topo da sua folha de estilo CSS.
|
||
|
|
|
||
|
|
```css
|
||
|
|
@font-face {
|
||
|
|
font-family: "My Super Awesome Open Sans Font"; /* name that you will use later to apply the font */
|
||
|
|
src: url("/fontfolder/open-sans.woff"); /* path to the file */
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: "My Super Awesome Open Sans Font";
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Observe que você também pode especificar o formato da fonte de acordo com a compatibilidade do navegador como a seguir.
|
||
|
|
|
||
|
|
```css
|
||
|
|
@font-face {
|
||
|
|
font-family: "My Super Awesome Open Sans Font";
|
||
|
|
src: url("/fontfolder/open-sans.woff"); format("woff"),
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Google Fonts
|
||
|
|
|
||
|
|
Com o Google Fonts, você não precisa fazer o upload dos arquivos de fontes no seu site, basta colocar um determinado link na `head` do seu site.
|
||
|
|
|
||
|
|
Para usar o Google Fonts, navegue pelo [site](https://fonts.google.com/) para encontrar a fonte que funciona melhor para o seu projeto. Depois de escolher, clique no sinal de mais (+) ao lado da fonte. Uma barra aparecerá na parte inferior da tela. Clique nisso. Você receberá várias linhas de código. Copie e cole a linha de HTML na cabeça do seu arquivo HTML acima do existente elemento. Então pegue o CSS e use-o onde for necessário na sua folha de estilo.
|
||
|
|
|
||
|
|
```html
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
Some text.
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
body{
|
||
|
|
font-family: "Inconsolata", monospace;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Você está feito! Você tem novas fontes para o seu site.
|
||
|
|
|
||
|
|
##### Recursos adicionais:
|
||
|
|
|
||
|
|
* [Google Fonts](http://fonts.google.com)
|
||
|
|
* [FontSpace](http://www.fontspace.com)
|
||
|
|
* [Esquilo fonte](http://fontsquirrel.com)
|
||
|
|
* [DaFont](http://www.dafont.com)
|
||
|
|
* [1001 Fontes Gratuitas](http://www.1001freefonts.com)
|
||
|
|
|
||
|
|
#### Mais Informações:
|
||
|
|
|
||
|
|
* [Visão geral de fontes da Web da Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts)
|