1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: '@font-face'
slug: Web/CSS/@font-face
translation_of: Web/CSS/@font-face
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">O <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.</span> Se a função <code>local()</code> for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função <code>url()</code> é baixado e usado.</p>
<p>Ao permitir que os autores forneçam suas próprias fontes, <code>@font-face</code> torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.</p>
<p>É comum usar <code>url()</code> e <code>local()</code> juntos, para que a cópia instalada da fonte do usuário seja usada, se disponível, voltando ao download de uma cópia da fonte, caso ela não seja encontrada no dispositivo do usuário.</p>
<p>A regra de CSS <code>@font-face</code> pode ser usada não apenas no nível superior de um CSS, mas também dentro de qualquer <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">CSS conditional-group at-rule</a>.</p>
<pre class="brush: css no-line-numbers">@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}</pre>
<h2 id="Sintaxe">Sintaxe</h2>
<h3 id="Descritores">Descritores</h3>
<dl>
<dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
<dd>Determina como uma fonte é exibida, com base em se e quando é baixada e pronta para uso.</dd>
<dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
<dd>Especifica um nome que será usado como o valor nominal da fonte para as propriedades da fonte.</dd>
<dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
<dd>Um valor {{cssxref ("font-stretch")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo, extensão de fonte: <code>font-stretch: 50% 200%;</code></dd>
<dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
<dd>Um valor {{cssxref ("font-style")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo <code>font-style: oblique 20deg 50deg;</code></dd>
<dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
<dd>Um valor de {{cssxref ("font-weight")}}. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo <code>font-weight: 100 400;</code></dd>
<dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
<dd>Um valor {{cssxref("font-variant")}}.</dd>
<dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
<dd>Permite o controle sobre recursos tipográficos avançados em fontes OpenType.</dd>
<dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
<dd>Permite o controle de baixo nível sobre as variações de fonte OpenType ou TrueType, especificando os nomes dos quatro eixos das letras dos recursos para variar, juntamente com seus valores de variação.</dd>
<dt>{{cssxref("@font-face/src", "src")}}</dt>
<dd>
<p>Especifica o recurso que contém os dados da fonte. Pode ser um URL para um local de arquivo de fonte remota ou o nome de uma fonte no computador do usuário.</p>
<p>Para fornecer ao navegador uma dica sobre o formato de um recurso de fonte - para que ele possa selecionar um adequado - é possível incluir um tipo de formato dentro de uma função <code>format()</code>:</p>
<pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
<p>Os tipos disponíveis são: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, e <code>"svg"</code>.</p>
</dd>
<dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
<dd>O intervalo de pontos de código Unicode a serem usados na fonte.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemplos">Exemplos</h2>
<p>Este exemplo simplesmente especifica uma fonte para download a ser usada, aplicando-a a todo o corpo do documento:</p>
<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Veja este exemplo</a></p>
<pre class="brush: html"><html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
</pre>
<p>Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o usuário não tiver essa fonte instalada (dois nomes diferentes são tentados), a fonte para download denominada "MgOpenModernaBold.ttf" será usada:</p>
<pre class="brush: css">@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
</pre>
<h2 id="Font_MIME_Types">Font MIME Types</h2>
<table>
<thead>
<tr>
<th>Formato</th>
<th>MIME type</th>
</tr>
</thead>
<tbody>
<tr>
<td>TrueType</td>
<td><code>font/ttf</code></td>
</tr>
<tr>
<td>OpenType</td>
<td><code>font/otf</code></td>
</tr>
<tr>
<td>Web Open File Format</td>
<td><code>font/woff</code></td>
</tr>
<tr>
<td>Web Open File Format 2</td>
<td><code>font/woff2</code></td>
</tr>
</tbody>
</table>
<h2 id="Notes">Notes</h2>
<ul>
<li>As fontes da Web estão sujeitas à mesma restrição de domínio (os arquivos de fonte devem estar no mesmo domínio da página que os utiliza), a menos que os <a href="/en-US/docs/HTTP_access_control">Controles de Acessos HTTP</a> sejam usados para relaxar essa restrição.</li>
<li><code>@font-face</code> não pode ser declarado dentro de um seletor CSS. Por exemplo, o seguinte não funcionará:
<pre class="brush: css; example-bad">.className {
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}</pre>
</li>
</ul>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
<td>{{Spec2('WOFF2.0')}}</td>
<td>Especificação de formato de fonte com novo algoritmo de compactação.</td>
</tr>
<tr>
<td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
<td>{{Spec2('WOFF1.0')}}</td>
<td>Especificação de formato</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Definição Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>
<p>{{Compat("css.at-rules.font-face")}}</p>
<h2 id="Veja_Também">Veja Também</h2>
<ul>
<li><a href="/en-US/docs/WOFF">About WOFF</a></li>
<li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
<li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
<li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
<li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
<li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
<li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li>
</ul>
|
