{"id":561,"date":"2022-06-09T23:18:33","date_gmt":"2022-06-10T02:18:33","guid":{"rendered":"https:\/\/fariart.com.br\/blog\/?p=561"},"modified":"2023-05-04T12:39:46","modified_gmt":"2023-05-04T15:39:46","slug":"a-melhor-forma-de-importar-fontes-no-css","status":"publish","type":"post","link":"https:\/\/fariart.com.br\/blog\/a-melhor-forma-de-importar-fontes-no-css\/","title":{"rendered":"A melhor forma de importar fontes no CSS"},"content":{"rendered":"\n

Para voc\u00ea que j\u00e1 est\u00e1 adotando um comportamento mais ousado no CSS<\/strong>, vamos te mostrar como importar fontes no CSS<\/strong> para que a sua p\u00e1gina n\u00e3o fique ref\u00e9m de fontes padr\u00f5es dos navegadores.<\/p>\n\n\n\n

No desenvolvimento web<\/strong>, chamamos de “embed<\/strong>” o ato de importar algo (que significa incorporar), ent\u00e3o quando voc\u00ea ouvir o termo “embedar fonte<\/strong>“, j\u00e1 sabe que \u00e9 o mesmo que importar fonte<\/strong>.<\/p>\n\n\n\n

Abaixo vamos mostrar alguns detalhes sobre o processo de subir fontes no seu site. Caso voc\u00ea queira pular direto para a melhor forma de incorporar fontes no CSS<\/strong>, use o atalho abaixo:<\/p>\n\n\n\n

Pular para o que interessa >><\/a><\/h3>\n\n\n\n
\"A
Google Fonts<\/figcaption><\/figure>\n\n\n\n

Como incorporar uma fonte que eu baixei?<\/h2>\n\n\n\n

Aqui \u00e9 um passo mais avan\u00e7ado que envolve quest\u00f5es mais complexas. Considere os direitos autorais da fonte e o peso da mesma antes de optar por incorporar a fonte que voc\u00ea quer.<\/p>\n\n\n\n

Copy Right<\/strong> – Muitas fontes<\/strong> bastante usadas por designers s\u00e3o pagas<\/strong>, e subir um arquivo de fonte em um servidor pode ser considerado pirataria mesmo se voc\u00ea n\u00e3o teve nenhuma inten\u00e7\u00e3o em disponibilizar o arquivo da fonte para download.<\/p>\n\n\n\n

O ideal \u00e9, sempre, ler atentamente os direitos reservados ao adquirir uma fonte para uso comercial. Mas, melhor ainda, \u00e9 usar fontes gratuitas<\/strong> livres de direitos autorais sempre que poss\u00edvel para evitar qualquer problema.<\/p>\n\n\n\n

Peso do Arquivo<\/strong> – Outro problema frequente \u00e9 a quantidade de pontos que comp\u00f5em a fonte. Nem todo designer leva em considera\u00e7\u00e3o essas quest\u00f5es, principalmente designers que nunca desenvolveram especialmente para a web ou que acham que o peso do arquivo n\u00e3o \u00e9 problema deles.<\/p>\n\n\n\n

A\u00ed voc\u00ea acaba usando uma fonte<\/strong> que est\u00e1 sobrecarregando sua p\u00e1gina e acabando com a experi\u00eancia do usu\u00e1rio que deveria ser tranquila e funcional. Optar por uma fonte mais leve<\/strong> \u00e9 sempre melhor. Ali\u00e1s, sempre escolha a op\u00e7\u00e3o mais leve em tudo.<\/p>\n\n\n\n

Mais abaixo n\u00f3s mostraremos os diferentes formatos<\/strong> de fontes e suas caracter\u00edsticas principais.<\/p>\n\n\n\n

Subindo a fonte no FTP<\/h3>\n\n\n\n

Sim, a sua fonte precisa estar na internet para que voc\u00ea possa us\u00e1-la no seu site e outras pessoas verem a p\u00e1gina exatamente como voc\u00ea est\u00e1 vendo na sua m\u00e1quina.<\/p>\n\n\n\n

Para isso, voc\u00ea precisa ter onde subir essa fonte. Caso voc\u00ea nunca tenha colocado um site no ar e ainda n\u00e3o sabe como funciona os servi\u00e7os de dom\u00ednio<\/strong> e hospedagem<\/strong>, leia o post: O que \u00e9 dom\u00ednio e hospedagem?<\/a><\/strong><\/p>\n\n\n\n

Importando a fonte no CSS<\/h3>\n\n\n\n

Para localizar a fonte no seu site, usaremos o seletor @fonte-face<\/strong> para definir o nome e o endere\u00e7o da fonte.<\/p>\n\n\n\n

@font-face {\n  font-family: 'NOME DA FONTE';\n  src: url('Nomedafonte-Regular.ttf') format('truetype');\n}<\/code><\/pre><\/div>\n\n\n\n
Aqui n\u00f3s estamos informando o nome da fonte no “font-family<\/strong>” e o endere\u00e7o onde a fonte est\u00e1 localizada no “src<\/strong>“.<\/sup><\/p>\n\n\n\n
Chamando a fonte no CSS<\/h3>\n\n\n\n
Na hora aplicar o estilo no seu elemento, basta usar o atributo font-family<\/strong> e informar o nome que voc\u00ea definiu no exemplo anterior.<\/p>\n\n\n\n
font-family: 'NOME DA FONTE', sans-serif;<\/code><\/pre><\/div>\n\n\n\n
O nome da fonte tem que ser exatamente o mesmo que voc\u00ea definiu no seletor @font-face<\/strong>.<\/sup><\/p>\n\n\n\n
Formatos de Fontes<\/h2>\n\n\n\n
TTF – True Type Font<\/h4>\n\n\n\n
TTF<\/strong> \u00e9 o formato mais b\u00e1sico<\/strong> de fontes. Ela funciona perfeitamente como fonte na web e suporta todos os caracteres que precisamos utilizar em portugu\u00eas.<\/p>\n\n\n\n
Este formato foi criado em conjunto pela Apple e Microsoft e \u00e9 o mais utilizado, tanto na web, quanto nos sistemas operacionais.<\/p>\n\n\n\n
OTF – Open Type Font<\/h4>\n\n\n\n
OpenType \u00e9 a evolu\u00e7\u00e3o do TrueType. Enquanto o formato TTF<\/strong> suporta apenas os caracteres comuns com acentua\u00e7\u00e3o e n\u00fameros, o formato OTF<\/strong> suporta v\u00e1rios outros recursos que os designers podem acrescentar na fonte, como: ligaduras, small caps, glifos, suporte para outros idiomas.<\/p>\n\n\n\n
O formato OpenType foi criado em conjunto pela Adobe e Microsoft.<\/p>\n\n\n\n
EOT – Embedded Open Type<\/h4>\n\n\n\n
EOT \u00e9 um formato de fonte criado pela Microsoft<\/strong> com o intuito de resolver problemas com direitos autorais de fontes TTF e OTF. O problema \u00e9 que esse formato s\u00f3 \u00e9 suportado pelo Internet Explorer<\/strong>.<\/p>\n\n\n\n
WOFF – Web Open Font Format<\/h4>\n\n\n\n
WOFF \u00e9 um formato de fontes feito especialmente para a web onde as fontes s\u00e3o compactadas possibilitando um carregamento mais r\u00e1pido.<\/p>\n\n\n\n
Esse formato foi criado pela Mozilla Foundation em colabora\u00e7\u00e3o com a Microsoft e o Opera Software. WOFF<\/strong> \u00e9 um formato suportado por todos os principais navegadores e \u00e9 considerado o futuro das fontes para a web.<\/p>\n\n\n\n
WOFF2<\/h4>\n\n\n\n
WOFF2 \u00e9 um upgrade do WOFF com 30% a mais de compress\u00e3o nas fontes, ganhando assim, um carregamento ainda mais r\u00e1pido que a vers\u00e3o anterior.<\/p>\n\n\n\n
Qual \u00e9 o melhor formato de fonte para usar na web?<\/h2>\n\n\n\n
Se voc\u00ea s\u00f3 pode usar um formato, sempre escolha o mais compat\u00edvel. Os formatos TTF<\/strong>, OTF<\/strong> e WOFF<\/strong> t\u00eam suporte para quase todos os navegadores exceto algumas vers\u00f5es antigas do Internet Explorer que s\u00f3 aceitam fontes no formato EOT.<\/p>\n\n\n\n
Sempre que \u00e9 necess\u00e1rio subir a fonte no FTP, eu escolho o formato mais leve.<\/p>\n\n\n\n
Qual \u00e9 a melhor forma de importar fontes no CSS?<\/h2>\n\n\n\n
A melhor e mais segura forma de incorporar<\/strong>, embedar<\/strong> ou importar fontes no CSS<\/strong> \u00e9 o Google Fonts<\/strong>. O servidor do Google<\/strong> \u00e9 mais seguro do que qualquer hospedagem que voc\u00ea tenha contratado, e vai ser muito mais r\u00e1pido puxar fontes que eles disponibilizaram.<\/p>\n\n\n\n
Google Fonts<\/h3>\n\n\n\n
O Google Fonts<\/a><\/strong> foi uma das melhores ferramentas que apareceram nos \u00faltimos anos para quem trabalha com desenvolvimento web<\/strong>, assim como v\u00e1rias novas ferramentas que vieram para nos salvar de trabalhos desnecess\u00e1rios.<\/p>\n\n\n\n
\"A
Google Fonts<\/figcaption><\/figure>\n\n\n\n
Todos os Web Designers<\/strong>, que montam PSD<\/strong> para desenvolvedores recortarem, deviam escolher apenas fontes que est\u00e3o dispon\u00edveis no Google Fonts<\/strong> para um ambiente de trabalho mais pac\u00edfico.<\/p>\n\n\n\n
O Google<\/strong> disponibiliza dois m\u00e9todos de incorpora\u00e7\u00e3o; <link><\/strong> ou @import<\/strong>.<\/p>\n\n\n\n
Exemplo importando a fonte Roboto:<\/h4>\n\n\n\n
Voc\u00ea pode apenas usar a tag link<\/strong> no HTML:<\/p>\n\n\n\n
<link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n<link href="https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@100&display=swap" rel="stylesheet"> <\/code><\/pre><\/div>\n\n\n\n
E chamar o atributo com o nome da fonte no CSS:<\/p>\n\n\n\n
font-family: 'Roboto', sans-serif;<\/code><\/pre><\/div>\n\n\n\n
Ou voc\u00ea pode usar o seletor @import<\/strong> com um endere\u00e7o direto do Google.<\/p>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@100&display=swap');<\/code><\/pre><\/div>\n\n\n\n
E tamb\u00e9m chamar o atributo com o nome da fonte no CSS, como no exemplo anterior:<\/p>\n\n\n\n
font-family: 'Roboto', sans-serif;<\/code><\/pre><\/div>\n\n\n\n
Al\u00e9m de poder usar as op\u00e7\u00f5es que eles deixam mastigadas, o Google Fonts<\/strong> tamb\u00e9m permite que voc\u00ea baixe toda a fam\u00edlia da fonte junto com o txt da Licen\u00e7a.<\/p>\n\n\n\n
\n\n\n\n
Se a dica foi \u00fatil ou se o post de ajudou de alguma forma, segue a @Fariart<\/a><\/strong> na sua rede social favorita.<\/p>\n","protected":false},"excerpt":{"rendered":"
Para voc\u00ea que j\u00e1 est\u00e1 adotando um comportamento mais ousado no CSS, vamos te mostrar como importar fontes no CSS para que a sua p\u00e1gina n\u00e3o fique ref\u00e9m de fontes padr\u00f5es dos navegadores. No desenvolvimento web, chamamos de “embed” o ato de importar algo (que significa incorporar), ent\u00e3o quando voc\u00ea ouvir o termo “embedar fonte“, […]<\/p>\n","protected":false},"author":1,"featured_media":939,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20,18,95],"tags":[15,61,93,91,92],"class_list":["post-561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-desenvolvimento-web","category-desenvolvimento-web","category-fontes","tag-css","tag-dicas","tag-embed","tag-fontes","tag-fonts"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/comments?post=561"}],"version-history":[{"count":28,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/561\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/561\/revisions\/2229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/media\/939"}],"wp:attachment":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/media?parent=561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/categories?post=561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/tags?post=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}