Uma fonte externa é um arquivo de fonte que não está incluído diretamente nos arquivos do seu projeto. Eles geralmente são hospedados em um servidor separado. Um servidor é um computador que fornece dados ou serviços para outros computadores através de uma rede. You will learn more about servers in future lessons. Fontes externas oferecem mais flexibilidade porque você pode usar fontes personalizadas que podem não estar instaladas no dispositivo do usuário. Google Fonts e Font Squirrel são recursos online populares para encontrar e usar fontes gratuitas para fins de desenvolvimento web. Você pode incorporá-los em seus projetos muito facilmente. Vamos começar com Google Fonts. Este é um serviço do Google que oferece uma coleção de fontes, muitas das quais são projetadas especificamente para desenvolvimento web. Na interface do usuário do Google Fonts, você pode ver muitos elementos diferentes. Vamos analisá-los um por um. Na barra lateral esquerda, você encontrará:

• Uma seção para ver, encontrar e filtrar fontes.
• Uma seção especial sobre Noto, uma coleção de fontes de alta qualidade com vários pesos, larguras e estilos que são perfeitos para comunicação em mais de 1.000 idiomas e mais de 150 sistemas de escrita.
• Uma seção onde você pode encontrar e baixar ícones para seus projetos web.
• Uma seção onde você pode aprender mais sobre fontes e suas melhores práticas seguida por perguntas frequentes.

Para adicionar uma Google Font ao seu site, você deve ir para a primeira seção (Fonts). Você pode personalizar o texto de visualização na barra lateral esquerda, onde está escrito "Preview." Basta escrever o texto que você gostaria de ver e ele será atualizado automaticamente. Isso é útil para visualizar a fonte com o texto que você já tem em mente para o seu site. Você também pode ajustar o tamanho da fonte e filtrar as fontes com base em suas características. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-1.png" alt="Google Fonts Fonts section showing a left sidebar with preview text set to 'G.E.A.R ACADEMY' at 40px, filter options for Language, Technology, and Decorative stroke, and the main panel listing font families including Roboto, SUSE, and Sevillana each previewing 'G.E.A.R ACADEMY'" /> Para ver mais informações sobre uma fonte, basta clicar nela e você verá informações importantes sobre a fonte, como quem a desenhou, texto de visualização e diferentes estilos, como light, regular, medium, bold e black. Se você clicar nas opções no topo, pode acessar o testador de tipos, ver glifos individuais e aprender mais sobre a fonte e sua licença. Você pode personalizar o tamanho da fonte do texto de visualização com o controle deslizante azul localizado ao lado do campo onde você pode inserir o texto de visualização. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-2.png" alt="Google Fonts Roboto Styles page with Specimen, Type tester, Glyphs, and About &amp; license tabs, a blue Get font button, a preview text field showing 'G.E.A.R ACADEMY' with a font size slider at 48px, and a list of styles including Thin 100, Thin 100 Italic, Light 300, and Light 300 Italic" /> Quando estiver pronto para adicionar a fonte ao seu projeto, clique no botão azul "Get font" no topo. Você será levado para uma página de resumo onde verá as fontes que você selecionou atualmente. Você pode ter várias fontes selecionadas simultaneamente. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-3.png" alt="Google Fonts page showing '1 font family selected' with Roboto Static listed, Get embed code and Download all buttons on the right, and a How to use section with All, Design, Develop, and Google products tabs" /> Em seguida, você precisa escolher se deseja baixar os arquivos de fonte para adicioná-los ao seu projeto como arquivos locais ou se deseja usá-los como fontes externas e baixá-los dos servidores do Google quando um usuário acessar seu site. Clique em "Download all" se você quiser baixá-los mas se preferir usá-los como fontes externas nos servidores do Google, clique em "Get embed code." Se você clicar em "Get embed code," verá as instruções que deve seguir para adicionar essas fontes externas ao seu projeto. Para projetos de desenvolvimento web, você tem duas opções. Você pode usar um elemento link ou @import. Se você escolher a opção do elemento link, pode copiar e colar o trecho HTML e as regras CSS para adicioná-los ao seu projeto. Você deve incorporar o código no elemento head do seu arquivo HTML e adicionar as regras CSS que atendam às suas necessidades. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-4.png" alt="Google Fonts Embed code page with the link element option selected, showing three link tags for preconnect and the font stylesheet, a CSS classes section with .roboto-thin, .roboto-light, .roboto-regular, and .roboto-medium rules, and a left sidebar showing font style toggles" /> Aqui está um exemplo de uso de todos os estilos Roboto:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">

<p class="roboto-thin">roboto-thin</p>
<p class="roboto-light">roboto-light</p>
<p class="roboto-regular">roboto-regular</p>
<p class="roboto-medium">roboto-medium</p>
<p class="roboto-bold">roboto-bold</p>
<p class="roboto-black">roboto-black</p>

<p class="roboto-thin-italic">roboto-thin-italic</p>
<p class="roboto-light-italic">roboto-light-italic</p>
<p class="roboto-regular-italic">roboto-regular-italic</p>
<p class="roboto-medium-italic">roboto-medium-italic</p>
<p class="roboto-bold-italic">roboto-bold-italic</p>
<p class="roboto-black-italic">roboto-black-italic</p>

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

Existe uma regra CSS para cada estilo de fonte. Cada regra atribui as fontes personalizadas com fontes de fallback caso as fontes personalizadas não sejam carregadas corretamente. Se você escolher a opção @import em vez disso, precisará adicionar essa regra ao seu arquivo CSS. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-5.png" alt="Google Fonts Embed code page with the @import option selected, showing a style block containing the @import URL rule, a CSS classes section below, and the left sidebar with font style toggles" /> Aqui está um exemplo:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

As regras de CSS são exatamente as mesmas. Se você quiser incluir apenas estilos de fonte específicos, também tem a opção de removê-los desses trechos. Os trechos de HTML e CSS serão atualizados automaticamente. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-6.png" alt="Google Fonts Embed code page with the link element option selected, showing the HTML snippet and CSS classes, and the left sidebar listing all Roboto styles from Thin 100 through Bold 700 each with a blue enabled toggle switch" /> E este é o Google Fonts. É uma das opções mais populares para encontrar fontes gratuitas e de código aberto para projetos de desenvolvimento web. Outra ótima opção é o Font Squirrel, onde você pode encontrar e baixar as fontes personalizadas que você imagina para o seu design. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-7.png" alt="Font Squirrel 'Free Font Utopia' page listing featured free fonts including Acherus Grotesque, Intro Rust, Source Sans Pro, Open Sans, and Questa, each shown with an alphabet specimen and a Download button" /> Se você pesquisar uma fonte e clicar em um resultado, verá mais detalhes sobre a fonte, incluindo specimens, test drive, glyphs e Webfont kit. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-8.png" alt="Font Squirrel search results for 'Roboto' showing three matches: Roboto, Roboto 2014, and Roboto Slab, each with an alphabet specimen and a Download TTF button" /> <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-9.png" alt="Font Squirrel Roboto page showing tabs for Sample, Specimens, Test Drive, Glyphs, License, and Webfont Kit, a dark specimen banner displaying 'Roboto' in large white text, and a Fonts section below listing Roboto Thin and Roboto Thin Italic with alphabet specimens" /> Você também pode ver exemplos dos diferentes estilos e variações da fonte, como thin, light, medium, bold e black. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-10.png" alt="Font Squirrel Roboto Specimens section listing all styles with alphabet samples: Roboto Thin, Thin Italic, Light, Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Bold Italic, and Black, each in its respective weight" /> Depois de decidir a fonte que você quer usar no seu projeto, vá para a aba "Webfont Kit". Aqui, você pode verificar se a licença da fonte permite que você a use em incorporações CSS @font-face. Você também pode escolher o subconjunto e o formato. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-11.png" alt="Font Squirrel Roboto Webfont Kit tab showing a license notice confirming @font-face embedding is allowed, a subset selector set to Western Latin, format checkboxes with WOFF selected, and a Download @font-face Kit button" /> Clicar no botão "Download @font-face Kit" fará o download de um arquivo compactado (zip). Se você descompactar, encontrará uma pasta "web fonts", a licença como um arquivo de texto e um arquivo HTML com instruções sobre como usar web fonts. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-12.png" alt="Three file icons showing the contents of the downloaded kit: a blue folder labeled 'web fonts', a text document labeled 'Apache License.txt', and an HTML file labeled 'How_to_use_webfonts.html'" /> A pasta de fontes web terá todos os arquivos de fonte que você precisa para o seu projeto. Você os encontrará agrupados em pastas específicas para os diferentes estilos de fontes. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-13.png" alt="macOS Finder showing the web fonts folder with 19 subfolders for each Roboto variant, named with the pattern roboto_weight_macroman, such as roboto_black_macroman, roboto_bold_macroman, and roboto_thin_macroman" /> Se você abrir o arquivo HTML em um navegador, ele contém instruções sobre como adicionar as fontes ao seu projeto, como incluí-las na folha de estilo com a declaração @font-face e como usá-las nas regras CSS. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-14.png" alt="FontSpring 'Installing Webfonts' page with three steps: uploading webfont files, including the webfont stylesheet with @font-face declarations, and modifying your own stylesheet, plus a Troubleshooting section on the right" /> É assim que você pode adicionar fontes personalizadas do Font Squirrel ao seu projeto. Você também pode hospedá-los em um servidor separado e usá-los como fontes externas. Fontes externas são muito úteis para personalizar a aparência geral e o design do seu site. Eles podem tornar seu site verdadeiramente único. No entanto, você também deve ter em mente que usar múltiplas fontes externas pode aumentar o tempo de carregamento do site, afetando seu desempenho geral. Você deve sempre buscar encontrar um equilíbrio entre estilo e eficiência.