Aprender sobre tudo sozinho não é fácil, mas muito interessante. Se você tem pelo menos um conhecimento superficial de como o site funciona, para implementar seu projeto é melhor fazer você mesmo. Ao fazer isso, você não só economizará muito dinheiro, mas também aprenderá muitos "chips", segredos, etc. Usar as fontes do Google geralmente não chama a atenção, embora possam tornar seu blog muito mais interessante graças a elas.

Serviço

Há muito tempo, um grande serviço de fontes da Web apareceu na Internet. Foi desenhado pelo Google... Os usuários podem usá-lo gratuitamente. Apesar de esse tipo de montagem não ser considerada super difícil, ainda havia pessoas que erraram e não conseguiram dar conta do serviço.

Um design simples foi desenvolvido especialmente para isso. As fontes do Google agora são mais fáceis de trabalhar e mais visitantes. A biblioteca também se expandiu. No ano passado, ocorreu uma reformulação do serviço, que arrecadou muito feedback positivo... Agora é mais fácil para as pessoas se conectar e navegar pelas fontes de seus sites.

Aparência

Então, para aqueles que nunca foram ao site com o design antigo, você precisa ter uma visão geral das mudanças. O serviço parecia muito grande no passado. Em todos os lugares havia molduras grossas, botões azuis atraentes, os gráficos não eram muito alta resolução... Tudo isso influenciou muito o visitante.

Agora, os desenvolvedores estão focados no design de materiais. Tudo adquiriu recursos sofisticados. Aparência tornou-se "mais fácil". Animação sutil e interatividade tornaram-se perceptíveis. Nada mais distrai a atenção de escolher as fontes certas do Google.

Existe agora uma adaptação conveniente do recurso para dispositivos móveis... Claro, essa mudança não é muito perceptível no contexto das inovações, mas levando em conta os bugs versão anterior se tornará "maná celestial" para usuários ávidos.

Oportunidade

Os designers costumam usar esse serviço. Apesar de sua experiência e profissionalismo, eles também trabalham com visualização. O redesenho apresentou mais oportunidades desse tipo, o que permitiria combinar antecipadamente o que precisará ser implementado posteriormente em seu projeto.

Portanto, o problema de como uma fonte é combinada com outra cor e um terceiro plano de fundo desapareceu. A empresa adicionou mais ferramentas e uma paleta com tons universais ao site, o que permitiria a você experimentar e descobrir como uma determinada fonte ficaria em uma determinada cor.

Favoritos

O serviço Google Fonts oferece aos usuários uma seleção de seus favoritos. Uma guia especial contém um conjunto de estilos que o desenvolvedor recomenda para uso. Essas coleções se destacam das demais. Eles são desenvolvidos por especialistas do Google e de agências terceirizadas. A maioria deles tem um certo estilo e uma filosofia particular.

Visualizar

Um de mudanças importantes tocou diretamente na escolha das fontes. Isso significa que mais cedo o usuário viu na sua frente um certo desenho com botões adicionais e um grande azul, que adicionava a fonte à coleção. Em geral, essa opção parecia boa, mas o boxe nem sempre tinha o suficiente boa resolução fotos com estilo e, portanto, era difícil determinar sem ambigüidade como a fonte ficaria.

Houve perguntas sobre esses botões adicionais, sobre os quais pouco se sabia à primeira vista. Era necessário direcioná-los ou usá-los. Agora tudo ficou mais ou menos claro. Recursos adicionais apareceram:

• Selecione uma frase, parágrafo específico ou seu próprio elemento de texto.
• Experimentos com pesos de fonte.
• Ajuste rápido de tamanhos usando o controle deslizante.

A propósito, o redimensionamento de fontes do Google agora é mais responsivo, pois apenas um exemplo mudou, nem tudo na página. V versão antiga os usuários podem ser transferidos de um lado para o outro da página, e na nova você simplesmente permanece no exemplo que está ajustando.

Conexão

Se você está pronto para usar este serviço, pode tentar conectar fontes ao seu recurso. O próprio processo de obtenção de um link é universal. Podem surgir problemas dependendo do seu sistema CMS. Cada um usa seus próprios métodos. Portanto, para projetos diferentes, você terá que selecionar opções separadas.

Veremos como obter um link para conectar as fontes do Google. Você precisa ir para o site oficial do Google Fonts. Lá você navega pelo catálogo de estilos e escolhe o que melhor se adapta às suas necessidades. Para fazer isso, pressione o sinal de mais ao lado dele. Depois disso, a fonte será adicionada a um bloco especial na parte inferior da página.

Clique neste bloco e personalize-o. Aqui você pode selecionar estilos e o alfabeto desejado. Se você precisar de fontes cirílico do Google, verifique a linha cirílico. Depois disso, um link será gerado. Ele pode ser encontrado na mesma janela na guia Incorporar. Você só precisa copiá-lo ou usar o código HTML completo.

Normalmente nas configurações do site há uma configuração de fontes e cores. Existem opções padrão e você pode adicionar opções avançadas. Eles contêm uma opção separada para Google Fonts. Se você precisar baixar fontes através do plugin Supreme Web do Google fontes.

Opções populares

É difícil, claro, julgar quais estilos são os melhores, especialmente para diferentes temas de site. Ao criar o seu site, lembre-se que você não deve gostar dele, mas sim do seu público. Portanto, é melhor dar uma olhada mais de perto nos sites concorrentes.

Normalmente, para recursos comerciais, ninguém se preocupa com estilos. Afinal, se você vir a fonte em Google Chrome em uma loja online, é improvável que você se preocupe com isso. Mas se você tem um blog na sua frente, então, provavelmente, você pode gostar de algo, mas algo, pelo contrário, será chato.

O Google Fonts preparou muitas coleções que incluem estilos populares. Por exemplo, eles gostam de usar Lobster para blocos individuais no texto. É difícil ler se todo o artigo estiver escrito em negrito e itálico. Mas inserções e citações parecem boas.

Bad Script também é uma opção para blogs. Itálico é difícil de ler em matrizes de texto grandes, mas eles podem destacar a ideia principal. O estilo imita a escrita à mão. Jura normal 400 é uma variante interessante do alfabeto cirílico. O autor afirma que este é um euroestilo da família Sans-Serif. Parece muito bom e tem várias variações.

A primeira parte deste capítulo é dedicada a uma introdução às fontes CSS. Nesta página, você aprenderá como incluir fontes em CSS, o que são fontes da web e como trabalhar com elas, quais formatos de fonte existem e como usar Google Fonts. Vamos começar examinando um exemplo fácil de incluir uma fonte CSS:

P (família de fontes: Verdana;)

Este pequeno trecho de código significa que todas as tags

A fonte é Verdana. A propriedade font-family especifica qual fonte ou família de fontes será usada. A exibição correta deste estilo no navegador do usuário depende se a fonte especificada está instalada em seu computador. No nosso caso, se não houver fonte Verdana no computador do usuário, o navegador exibirá a fonte padrão.

Ao mesmo tempo, os designers tinham que especificar várias fontes alternativas para o caso de a principal estar faltando no computador do usuário. Digamos que você queira estilizar o texto com a fonte Verdana e instalar as fontes Trebuchet MS, Geneva e qualquer fonte sans-serif como substitutos. Está escrito desta forma:

P (família de fontes: Verdana, "Trebuchet MS", Genebra, sans-serif;)

Ao processar este código, o navegador verificará primeiro a presença da fonte Verdana no computador do usuário. Se a fonte estiver presente, o conteúdo das tags

Exibido nesta fonte. Se a fonte estiver faltando, o navegador verificará a próxima fonte na lista - Trebuchet MS. Se esta fonte também estiver faltando, a próxima fonte será verificada - Genebra. Se o usuário não tiver Geneva em seu computador, o navegador selecionará outra fonte sans-serif disponível e exibirá o texto com ela.

Observação: no código, anotamos o nome da fonte Trebuchet MS entre aspas. É necessário colocar o nome da fonte entre aspas duplas ou simples quando contiver espaços.

Você pode ler sobre o que é uma fonte serif e sans-serif na página da Wikipedia.

Fontes da web

A forma acima de usar fontes tem uma grande desvantagem - você é limitado no número de fontes. Você terá que se contentar apenas com as opções que provavelmente estão instaladas na maioria dos computadores.

Como você pode aumentar a escolha de fontes para tornar o design da página individual e adicionar originalidade? As fontes da Web vêm em socorro. Leia o capítulo seguinte para descobrir como trabalhar com eles.

Assim, para exibir a fonte desejada no navegador do usuário, precisamos fazer o download dessa fonte no próprio computador. Isso é bastante simples de fazer. Este método de conectar fontes ao CSS abre oportunidades realmente grandes para designers. Mas vale a pena mencionar a mosca na sopa: em primeiro lugar, nem todo navegador suporta um formato de fonte específico (o que fará com que a fonte não seja exibida) e, em segundo lugar, se o arquivo com a fonte tiver muito peso, pode ficar lento baixando a página.

Suporte de formato

Como lidar com o problema de incompatibilidade de formato de arquivo? Vamos dar uma olhada na tabela que mostra os formatos de fonte mais populares e ver quais navegadores os suportam:

Observação: informação atualizada Você sempre pode descobrir mais sobre o suporte ao formato de fonte em caniuse.com. Na barra de pesquisa, você deve inserir o nome do formato (por exemplo, ttf).

Se você está almejando navegadores modernos, você só precisa usar o formato de fonte TTF - o mais comum e usado. No caso de precisar de vários formatos de uma fonte, você pode usar conversores online especiais de um formato para outro e, em seguida, conectar todos os arquivos um por um. Assim, o navegador poderá escolher o formato da fonte com a qual trabalhará.

Incluindo uma fonte da web usando @ font-face

Suponha que você tenha sua própria fonte exclusiva chamada MyUniqueFont no formato TTF e deseja exibir o texto principal de sua página da web com essa fonte. A primeira coisa a fazer é copiar o arquivo de fonte para a pasta onde todos os outros arquivos do site estão localizados. Para evitar confusão, você pode criar uma pasta separada especificamente para fontes, nomeada, por exemplo, fontes.

@ font-face (font-family: MyUniqueFont; src: url ("fonts / MyUniqueFont.ttf");)

A propriedade da família de fontes em nesse caso desempenha um papel diferente: com ele atribuímos um nome à fonte, para que posteriormente possamos usar este nome ao escrever o estilo:

P (família de fontes: MyUniqueFont;)

A segunda linha contém o caminho para o arquivo de fonte. Em nosso exemplo, o arquivo MyUniqueFont.ttf está localizado na pasta fonts. Seu URL pode ser diferente.

Fontes do Google

O Google facilita a inclusão de qualquer fonte da coleção de Fontes do Google. Tudo o que você precisa fazer para começar a usar a fonte de sua preferência é especificar algumas configurações na página da fonte no Google, em seguida, copiar o link especial para essa fonte e adicioná-lo ao seu documento da web.

Observação: toda a coleção de fontes do Google está disponível no site Fontes do Google... Na página, você pode usar vários filtros para pesquisar fontes por categoria, espessura, alfabeto.

A seguir, descreveremos cada etapa da conexão de uma fonte do Google. Para entender o que está em jogo, escolha qualquer fonte com páginas do google Fontes e abra-o clicando no botão de uso rápido.

Etapa 1: escolha um rosto

Primeiramente, na página da fonte selecionada, serão exibidas as opções de seu estilo, assim como o ícone do velocímetro, que nada mais significa que a velocidade de carregamento da fonte. Quanto mais estilos você escolher para uma fonte, mais tempo levará para fazer o download. Portanto, é recomendável selecionar apenas as opções de tipo de letra que você planeja usar.

Etapa 2: escolha um alfabeto

Mais adiante na página, é possível selecionar um conjunto de caracteres: latino, cirílico, etc. Dependendo da fonte, nem todas as variantes do alfabeto podem estar disponíveis nela. Semelhante ao ponto anterior, é melhor marcar a caixa ao lado do alfabeto de que você precisa.

Etapa 3: adicione o código ao site

O primeiro método envolve adicionar um link para o código HTML para servidor google de onde a fonte é baixada. Você precisa copiar o trecho de código pronto e colocá-lo entre as tags em seu documento HTML. Exemplo:

...

A segunda maneira é conectar a fonte usando a diretiva @import. O código finalizado está na segunda guia do ponto 3 na página da fonte do Google selecionada. Ele precisa ser adicionado no início de sua folha de estilo (caso contrário, o arquivo não será importado). O código é parecido com este:

@import url (http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

A peculiaridade do primeiro método é que você precisa adicionar um link para a fonte no título de cada página onde planeja usá-la. Isso é fácil de fazer em sites com Pequena quantidade páginas, mas problemático para grandes recursos. O segundo método é conveniente porque o código pode ser colocado bem no início da folha de estilo externa, e então todas as páginas às quais esta tabela está conectada receberão a fonte necessária, que será carregada usando a diretiva @import.

Etapa 4: crie o estilo

Depois de concluir as etapas anteriores, você pode começar a aplicar a fonte. Você já viu como essa regra CSS é escrita antes:

P (família de fontes: "Roboto", sans-serif;)

Se no primeiro passo você escolheu várias opções para o estilo (por exemplo, adicionou a opção negrito Bold 700), então, na terceira etapa, o código será ligeiramente modificado:

@import url (http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Para então dar a fonte negrito, escreva seu estilo CSS assim:

P (família da fonte: "Roboto", sans-serif; peso da fonte: 700;)

Observação: O Google Fonts usa apenas unidades convencionais de 100 a 900 para indicar o peso da fonte. Por exemplo, normal (padrão) é equivalente a 400 (normal) e negrito padrão é equivalente a 700 (negrito).

As principais vantagens Serviço Google Fontes é:

• facilidade de uso (até um iniciante pode descobrir o serviço, e todo o código necessário é gerado automaticamente - você só precisa copiá-lo);
• disponibilidade de fontes (não há necessidade de pagar por elas);
• todos os formatos de fonte usados ​​são fornecidos (isso significa que cada navegador será capaz de baixar exatamente o formato de fonte com o qual funciona).

Entre as desvantagens do serviço está a pouca variedade de fontes, especialmente as cirílicas. A propósito, existem outros serviços semelhantes na Internet, por exemplo, TypeKit (pago).

Resultados

Hoje temos várias opções para conectar fontes originais e não padrão a páginas da web. Cada um desses métodos tem suas próprias vantagens e desvantagens. Qual das opções é melhor usar, você precisa determinar por si mesmo. Isso geralmente depende da situação e abordagens diferentes podem ser úteis em casos diferentes. Neste ponto, você só precisa saber como usar fontes em CSS.

Google Fonts é um dos melhores recursos com fontes da web gratuitas e o Google oferece várias maneiras de importá-las para o seu site. Infelizmente, nenhum deles inclui o popular mecanismo WordPress. Isso significa que você deve usar plug-ins, que são muitos, ou sujar a mão mexendo no código.

A boa notícia é que você pode instalar qualquer fonte de bibliotecas do google quase qualquer Tema WordPress sem muito aborrecimento. Como exatamente - nós vamos te ensinar hoje.

Existem duas opções - conectar o plugin ou mexer um pouco no arquivo functions.php.

Mas primeiro eu gostaria de listar as vantagens e desvantagens do Google Fonts, para que você possa finalmente decidir se vai usá-las em seus projetos ou não.

Bom e ruim google Fontes da web

Quando se trata de fontes da web, o Google é um dos melhores opções em termos de desempenho ... Tudo por causa da construção leve e do sistema de cache. Os visitantes não precisam esperar que as fontes do Google sejam carregadas se tiverem visitado recentemente um site que as usa. Fontes populares como Open Sans podem melhorar o desempenho do seu site, reduzindo os tempos de carregamento.

Outra característica é que O Google permite que você baixe essas fontes para que você possa usá-los em seus layouts.

E finalmente a plataforma é totalmente grátis ... Para começar a usar as fontes, você só precisa fazer o login ou iniciar caixa de correio no Gmail (quem não tem Gmail hoje?).

Das deficiências você pode indicar isso a escolha de fontes do google é pequena , muitos deles são semelhantes entre si. É preciso pesquisar muito para encontrar uma fonte original e decente. Existem muito poucas fontes cirílicas.

Além disso, existem os habituais preocupações com segurança - você precisa fornecer algumas informações pessoais ao instalar fontes do Google em seu site.

Como instalar fontes do Google usando plug-ins do WordPress

Se você pesquisar por plug-ins, a primeira coisa que verá nos resultados da pesquisa é Plug-ins WP Google Fonts e Easy Google Web Fonts ... Esses são realmente os dois melhores plug-ins.

Plugins não são solução ideal por google install-fonts em um site WordPress - não apenas do ponto de vista de desempenho, mas também porque os plug-ins não permitem que você selecione certos pedaços de texto. No entanto, se você ou seu cliente estão convencidos de que é melhor usar plug-ins, dê uma olhada nessas duas opções.

Este plugin permite que você direcione elementos específicos como cabeçalhos H1, parágrafos e citações. Você também obtém uma opção CSS customizada para estilizar fontes específicas. É muito fácil adicionar e personalizar fontes do Google em seu site WordPress com este plugin.

Easy O Google Web Fonts faz jus ao seu nome e torna a instalação do Google Fonts muito fácil, mesmo para iniciantes. Você pode usar o recurso Live Preview para visualizar, testar e otimizar fontes sem sair do site e criar suas próprias regras de fonte sem escrever uma linha de código.

A maneira correta de instalar Google Fonts em um modelo WordPress

No final, chegamos à opção de abrir o arquivo functions.php e fazer um pouco de código. Antes de fazer isso, você precisa selecionar uma fonte da biblioteca do Google. Por exemplo, vamos tentar pegar o muito popular Open Sans.

Em seguida, você precisa escolher um estilo de fonte - normal, negrito ou itálico. Você pode fazer isso sozinho :)

Depois de escolher os estilos, o Google fornecerá um snippet de código. O nosso é assim:

Além disso, temos o estilo CSS:

família de fontes: "Open Sans", sans-serif;

Agora é hora de abrir seu arquivo functions.php (caminho do arquivo: wp-content / themes / yourtheme). No final do arquivo, adicione uma nova função:

function load_fonts ()
{
wp_register_style ("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic.400,700,300"); wp_enqueue_style ("et-googleFonts");
}
add_action ("wp_print_styles", "load_fonts");

A chave para esta função é o comando "wp_enqueue_style", que força o WordPress a invocar as folhas de estilo da fonte no cabeçalho de cada página. Se você olhar com atenção, verá que removemos o link href = e rel = 'stylesheet' type'text / css 'do código que o Google nos forneceu, e você precisará fazer o mesmo se quiser adicionar qualquer outro Google fonte para o seu site WordPress.

Tudo que você precisa fazer agora é abrir o principal Arquivo CSS e inserir estilo com Open Sans. As regras usuais funcionam aqui, então adicione o seguinte código à sua folha de estilo, salve e atualize:

corpo
{
fonte: normal 1em "Open Sans", sans-serif;
cor: # 313131;
}

Este estilo funcionará em todo o site. Você pode definir um estilo diferente para fragmentos de texto individuais:

Texto em negrito
{
fonte: negrito 1em "Open Sans", sans-serif;
}

Como você pode ver, é muito simples. Experimente e verifique o resultado :)

Vlad Merzhevich

A fonte é parte integrante do web design, confere expressividade e reconhecimento ao site, expressa o estilo característico do site e está diretamente relacionada à percepção dos textos. Uma fonte bem escolhida pode não ser notada, mas sem ela não haverá entusiasmo para completar o design do site.

Se você já tem uma fonte específica instalada em seu computador, então nos estilos basta adicionar uma linha.

h1 (família de fontes: SuperPuperFont;)

O valor da propriedade font-family é o nome da fonte, ele será aplicado a todos os cabeçalhos

... Mas o que os visitantes do site verão se não tiverem nossa fonte espetacular e rara instalada? Essa situação é mais provável, portanto, se o navegador não reconhecer a fonte declarada, ele usará a fonte padrão, por exemplo, no Windows é Times New Roman. Todo o nosso design de tipo cuidadosamente pensado desmoronará durante a noite, então precisamos procurar a solução mais versátil. A primeira coisa que vem à mente imediatamente é organizar o download do arquivo da fonte para o computador do usuário e exibir o texto na fonte selecionada. Comparado a outros métodos, como exibir texto por meio de uma imagem, esse método é o mais simples e versátil.

Quais são as vantagens de baixar um arquivo de fonte e aplicá-lo via CSS.

• O texto é fácil de adicionar e editar.
• No navegador, você pode usar a pesquisa e encontrar as frases desejadas.
• Nas configurações do navegador, você pode diminuir ou aumentar o tamanho da fonte para obter uma visualização confortável.
• Motores de busca indexa bem o conteúdo do documento.
• O texto pode ser selecionado e copiado para a área de transferência, bem como traduzido para outro idioma.
• Parâmetros de texto como espaçamento de linha, cor, tamanho e outros são fáceis de alterar usando as propriedades CSS.
• Novamente, por meio do CSS, você pode simplesmente adicionar diferentes efeitos ao texto, por exemplo, uma sombra.

Como você pode ver, as vantagens são muitas. Existem algumas desvantagens menores e vale a pena mencionar para o equilíbrio.

• Nem todas as versões do navegador suportam a fonte para download e o mesmo formato para todos.
• O arquivo contendo a fonte pode ocupar grande volume retardando assim o carregamento da página da web.

Mesa 1 lista as versões do navegador e os formatos de fonte que eles suportam.

Aba. 1. Formatos suportados

Formato	Internet Explorer	cromada	Ópera	Safári	Raposa de fogo	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

O formato mais compatível é TTF. Com exceção do IE até a versão 9.0 e iOS, todos os navegadores o entendem perfeitamente. Portanto, se você tiver uma fonte neste formato e estiver almejando navegadores modernos, não será necessário realizar nenhuma etapa adicional. Basta escrever o seguinte código em estilos (exemplo 1).

Exemplo 1. Conectando TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Primeiro, carregamos o próprio arquivo de fonte usando a regra @ font-face. Dentro dele, escrevemos o nome da fonte usando o parâmetro font-family e o caminho para o arquivo usando src. Em seguida, usamos a fonte como de costume. Portanto, se precisarmos definir a fonte para o título, para o seletor h1, conforme mostrado no exemplo, definimos a propriedade font-family com o nome da fonte carregada. Para versões mais antigas do IE, listamos substitutos separados por vírgulas. Nesse caso, a fonte do título será "Comic Sans MS" porque o IE8 e versões anteriores não suportam o formato TTF.

O resultado deste exemplo é mostrado na Fig. 1.

Arroz. 1. Título com fonte baixada

E se você precisar de uma fonte ornamentada no IE8? Felizmente, @ font-face permite incluir vários arquivos de fontes ao mesmo tempo. formatos diferentes... O navegador só precisa escolher o apropriado. Assim, uma solução universal que funciona em todos os navegadores se resume em converter o formato TTF existente para EOT e, em seguida, conectar os dois arquivos.

Para conversão, existem vários serviços online que permitem baixar um arquivo TTF e obter um arquivo EOT na saída. Infelizmente, a maioria desses serviços tem o mesmo problema - recebemos o arquivo, mas o idioma russo não é compatível. Como resultado, o resultado desejado não é alcançado, a conversão está incorreta. Entre os sites que verifiquei, havia um que exibia o texto corretamente no IE.

Acesse este site, carregue o arquivo TTF e pressione o botão "Converter TTF em EOT", após o qual salvamos o arquivo resultante na pasta de fontes. Existe um pequeno truque nos estilos para forçar diferentes navegadores a carregar a fonte no formato correto. Para fazer isso, adicione dois parâmetros src. O primeiro aponta para o arquivo EOT e é para versões anteriores do IE. O segundo parâmetro src deve conter dois endereços separados por vírgulas, um dos quais aponta para um arquivo TTF. O fato é que o IE versão 8.0 e anterior não entende a vírgula no parâmetro src e, portanto, irá ignorar o parâmetro totalmente. Pode haver várias opções de grafia, por exemplo, repetir url, especificar o nome da fonte dentro do parâmetro local ou escrever uma fonte inexistente. Se o navegador não conseguir carregar essa fonte, ele irá para a segunda fonte da lista e nós a escrevemos corretamente. Formas aceitáveis ​​de escrita.

src: url (fonts / pompadur.ttf), url (fonts / pompadur.ttf);
src: local (pompadur), url (fonts / pompadur.ttf);
src: local ("bla bla"), url (fonts / pompadur.ttf);

Uma opção funcional para conectar uma fonte para todas as versões de navegadores é mostrada no exemplo 2.

Exemplo 2. Conectando EOT

HTML5 CSS3 IE Cr Op Sa Fx

Um elemento moderno do processo político

Na verdade, a doutrina política de Montesquieu conduz o tipo de cultura política continental-europeia, que se refletiu nas obras de Michels.

Quanto ao iOS, não parece fazer muito sentido para mim criar e baixar uma fonte separada no formato SVG. A audiência de sites que navegam pelo iOS ainda é pequena, além disso, estão tentando facilitar a versão do site para dispositivos móveis, não sendo desejável baixar várias dezenas de kilobytes adicionais.

Fontes da web do Google

Um serviço conveniente que cuida da rotina de suporte a diferentes formatos de fonte e versões de navegador pode ser encontrado em www.google.com/webfonts... Embora existam relativamente poucas fontes diferentes na coleção (há várias dezenas delas), todas são de altíssima qualidade e podem ser usadas gratuitamente em sites.

Antes de escolher uma fonte, mude o valor de Script para Cirílico, então você verá uma lista de fontes que suportam russo (Fig. 2).

Arroz. 2. Seleção de fontes no Google Web Fonts

A fonte desejada deve primeiro ser adicionada à coleção clicando no botão "Adicionar à coleção" e, em seguida, no botão "Usar" no canto inferior direito da tela. No próxima página(fig. 3) você pode finalmente escolher as fontes que deseja. Deve ser entendido que uma fonte pode conter vários estilos, e cada um deles aumenta o volume dos arquivos baixados.

Arroz. 3. Fontes carregadas na página

Você pode conectar as fontes selecionadas usando um dos três caminhos, o código adicionado pode ser copiado para baixo na página.

1. Por meio do elemento ... A linha será semelhante à seguinte.

2. Por meio da regra @import. Inserimos esta linha em nosso arquivo CSS no topo.

@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Por meio de JavaScript.

Basicamente, todos os caminhos são iguais, então escolha de acordo com sua preferência.

Benefícios do aplicativo deste serviço tal.

• As fontes são gratuitas, você não precisa pagar por elas.
• As fontes oferecidas são "aguçadas" para visualização na tela, os arquivos são otimizados e ocupam um volume relativamente pequeno.
• O navegador é detectado automaticamente e uma fonte no formato necessário é exibida para ele.

Uma das principais vantagens do serviço é que as fontes são armazenadas nos formatos TTF, EOT, WOFF, SVG e carregadas após verificação no navegador. Portanto, o formato EOT estará disponível apenas para versões anteriores do IE.

Usar ou não o Google Web Fonts é com você. Se você não encontrou uma fonte adequada lá, você sempre pode conectar o popular e difundido TTF. Além disso, é suportado últimas versões todos os navegadores populares.

A fonte desempenha um papel importante no design do site, pode enfatizar o estilo geral, ajudar o usuário a navegar pelo conteúdo do texto. Pesquisar fontes gratuitas e, em seguida, conectar um monte de arquivos para navegadores diferentes não é uma coisa gratificante, mas há uma saída - fontes do Google Fonts.

Encontrar a fonte certa no Google Fonts

Vamos para o próprio serviço de fontes do Google e dar uma olhada em seus recursos.

No painel esquerdo (lateral), você pode configurar os parâmetros de filtragem de fonte e, o mais importante, selecionar se pertence ao alfabeto cirílico ou latino.
Na parte superior, você pode alterar a exibição do texto de demonstração, na forma de: palavra, frase, parágrafo, pôster. Altere o tamanho da fonte e insira seu próprio texto em vez da versão demo.

Conectando uma fonte do Google Fonts

Depois de ter escolhido a fonte que você quer, clique no botão "uso rápido" (veja a imagem abaixo)

Na página de conexão da fonte, você precisa selecionar:

1. Estilos de fonte, negrito, itálico, etc. Não faça overclock muito, escolha apenas o mais necessário, porque tudo isso afeta a velocidade de carregamento da fonte e, consequentemente, a velocidade de carregamento do texto em seu site. Siga os indicadores do sensor à direita (ponto 5 na imagem)
2. Escolha quais caracteres você precisa nesta fonte (principalmente latino e cirílico).
3. Copie o código da tag do link no bloco HEAD
4. Usamos a declaração da fonte nos estilos conforme mostrado no parágrafo 4 (ver imagem)