12

Dentro de um arquivo estilo.css estou usando a opção @import url() para chamar outro arquivo CSS.

Por exemplo:

@import url("/css/fonts.css")

Tanto o arquivo quanto o caminho estão corretos e mesmo assim não consigo importar esse CSS.

  • Onde pode está o erro?
  • Nesse caso,qual a melhor maneira de usar o @import?
5
  • 1
    Você já verificou se o arquivo está realmente sendo atulizado e livre de cache?
    – Ricardo
    10/03/2014 às 19:06
  • o seu @import é a primeira linha do seu .css? Sem nada antes, nem mesmo comentários ? Se você puder colar o começo do seu .css, seria melhor 10/03/2014 às 19:08
  • 1
    O caminho está realmente certo? 10/03/2014 às 19:08
  • 3
    @woliveirajr putz cara fui um ignorante agora, existia uma linha de comentário antes e não sabia que isso influenciava troquei a posição e funcionou, grato.
    – HeltonSS
    10/03/2014 às 19:15
  • @HeltonSS legal que funcionou. Coloquei o comentário como resposta, assim voce pode aceitar e ficará mais fácil para os futuros visitantes da sua pergunta saberem qual foi a resposta que ajudou. 10/03/2014 às 19:22

5 Respostas 5

11

A linha do @import tem que ser a primeira no seu arquivo .CSS. Se você inserir qualquer informação antes (por exemplo, comentários), o @import falhará.

No máximo, você poderá ter um

<style>
    @import....
</style>

antes do seu @import.

1
9

Recomendo que o @import seja colocado logo após @charset "UTF-8";.

Depois você deve especificar o caminho da fonte fornecido no Google Fonts, logo após a fonte estará instalada e pronta para ser utilizada. Importante ressaltar que temos que utilizar o nome específico que o site fornece para funcionar corretamente. No meu exemplo, usei a fonte Titillium pelo Google Web Fonts.Veja:

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
h1 {
font-family: 'Titillium Web', sans-serif;
}

Vale lembrar que o @import é um elemento CSS, então pode ficar dentro de uma tag <style> no head do seu HTML. Nesse exemplo, usei a fonte Dancing Script pelo Google Fonts, o código fica assim:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>

Obs: Além da segurança de usar fontes do Google Web Fonts, temos também a facilidade, sem precisar fazer download de nada, apenas copiando o caminho da fonte desejada que já está hospedada nos servidores do google e especificando o seu nome no seu arquivo CSS.

Refencia:

3

Como já mencionado pelo @woliveirajr, o @import deve estar na primeira linha do arquivo.

Só um comentário: lembre-se considerar que o uso do @import pode trazer um impacto negativo na performance do seu site. De acordo com um post de Steve Sounders, ao contrário do tag <link>, se você tem múltiplos comandos @import em sequência, eles podem não ser carregados em paralelo no momento em que a sua página é aberta.

Outra vantagem de se usar o <link> em vez do @import é que você pode especificar também o tipo do atributo media (print, screen, etc), ou definir folhas de estilo preferidas ou alternativas.

1

Você não deve usar /css/arquivo.css, utilize: css/arquivo.css sem o "/" na frente do nome da pasta. Sendo assim, ficaria: @import url("css/fonts.css") e caso ele esteja na mesma pasta, basta usar: @import url("fonts.css")

0
1

Usando no Joomla esse modelo.

/*comment pode vir antes */

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

Lembrando que o @import é a primeira linha antes de qualquer seletor. Mas pode haver comentários antes dela que funcionará também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .