Como importar o Google Web Font no arquivo CSS?

Estou trabalhando com um CMS que só tenho acesso ao arquivo CSS. Portanto, não posso incluir nada no cabeçalho do documento. Eu queria saber se havia uma maneira de importar a fonte da web de dentro do arquivo CSS?

Use o @importmétodo:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Obviamente, "Open Sans" ( Open+Sans) é a fonte importada. Então substitua-o pelo seu. Se o nome da fonte tiver várias palavras, codifique-a por URL adicionando um+ sinal entre cada palavra, como eu fiz.

Certifique-se de colocar o @import no topo do seu CSS, antes de qualquer regra.

O Google Fonts pode gerar automaticamente a @importdiretiva para você. Depois de escolher uma fonte, clique no (+)ícone ao lado dela. No canto inferior esquerdo, um contêiner intitulado "1 família selecionada" será exibido. Clique nele e ele será expandido. Use a guia "Personalizar" para selecionar opções e, em seguida, volte para "Incorporar" e clique em "@import" em "Incorporar fonte". Copie o CSS entre as <style>tags na sua folha de estilo.

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Melhor não usar @import. Basta usar o elemento link, como mostrado acima, na cabeça do seu layout.

Faça o download da fonte ttf / outros arquivos de formato e adicione simplesmente este exemplo de código CSS:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

Adicione o código Abaixo no seu arquivo CSS para importar o Google Web Fonts.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Substitua o Open + Sans valor do parâmetro pelo seu nome da fonte.

Seu arquivo CSS deve se parecer com:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

1. Basta ir para https://fonts.google.com/
2. Adicione fonte clicando em +
3. Vá para a fonte selecionada> Incorporar> @IMPORT> copie o URL e cole no arquivo .css acima da etiqueta do corpo.
4. Está feito.

Use a tag @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

Juntamente com as respostas acima, considere também este site; https://google-webfonts-helper.herokuapp.com/fonts

Vantagem:

• permite que você auto-hospede essas fontes do Google para obter melhores tempos de resposta

• escolha sua (s) fonte (s)

• escolha seu conjunto de caracteres
• escolha seus estilos / peso de fonte
• escolha o seu navegador de destino
• e você obtém os trechos de CSS (adicione à sua folha de estilo css) mais um zip dos arquivos de fonte para incluir no seu projeto

Por exemplo, your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}

Você também pode usar @ font-face para vincular aos URLs. http://www.css3.info/preview/web-fonts-with-font-face/

O CMS suporta iframes? Você também pode lançar um iframe na parte superior do seu conteúdo. Provavelmente seria mais lento - melhor incluí-lo no seu CSS.

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Para escolher a fonte, você pode visitar o link: https://fonts.google.com

Escreva o nome da fonte de sua escolha no site, excluindo os colchetes.

Por exemplo, você escolheu Lobster como uma fonte de sua escolha,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Em seguida, você pode usar isso normalmente como uma família de fontes em todo o arquivo HTML / CSS.

Por exemplo

<h2 style="Lobster">Please Like This Answer</h2>

Jus ir através do link

https://developers.google.com/fonts/docs/getting_started

Para importá-lo para a folha de estilo, use

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Podemos fazer isso facilmente em css3. Temos que simplesmente usar a declaração @import. O vídeo a seguir descreve facilmente a maneira de fazer isso. então vá em frente e assista.

https://www.youtube.com/watch?v=wlPr6EF6GAo