How do I use @import in a CSS file?

Asked

Viewed 20,277 times

12

Inside a.css style file I am using the option @import url() to call another file CSS.

For example:

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

Both the file and the path are correct and still I can’t import that CSS.

  • Where can the error be?
  • In that case, what is the best way to use the @import?
css css3
  • 1

    Have you checked whether the file is actually being tapped and cached free?

  • your @import is the first line of your . css? Nothing before, not even comments ? If you can paste the beginning of your . css, it would be better

  • 1

    The way is really right?

  • 3

    @woliveirajr Putz guy was an ignorant now, there was a comment line before and did not know that it influenced changed the position and worked, grateful.

  • @Cool Heltonss that worked. I put the comment as an answer, so you can accept and it will be easier for future visitors to your question to know what was the answer that helped.

5 answers

11


The line of @import has to be the first in your .CSS. file if you enter any information before (for example, comments), @import will fail.

At most, you can have one 

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

before your @import.

  • Remembering that@import should come AFTER@charset (if one exists). https://www.w3schools.com/cssref/pr_import_rule.asp

8

I recommend that the @import be placed shortly after @charset "UTF-8";.

Then you must specify the source path provided on Google Fonts, soon after the source will be installed and ready to use. Important to note that we have to use the specific name that the site provides to work properly. In my example, I used the source Titillium for Google Web Fonts.Behold:

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

It is worth remembering that the @import is an element CSS, then it can get inside a tag <style> in the head of your HTML. In this example, I used the source Dancing Script for Google Fonts, the code looks like this:

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

Note: In addition to the security of using Google Web Fonts, we also have the facility, without needing to download anything, just copying the path of the desired source that is already hosted on google servers and specifying your name in your file CSS.

Refencia:

3

As already mentioned by @woliveirajr, the @import should be on the first line of the file.

Just one comment: remember to consider that the use of @import can bring a negative impact on the performance of your website. According to a post by Steve Sounders, unlike the tag <link>, if you have multiple commands @import in sequence, they may not be loaded in parallel at the time your page opens.

Another advantage of using the <link> instead of the @import is that you can specify also the type of attribute media (print, screen, etc.), or define preferred or alternative style sheets.

1

You should not use /css/.css file, use: css/.css file without the "/" in front of the folder name. That would be: @import url("css/fonts.css") and if it’s in the same folder, just use: @import url("fonts.css")

1

Using in Joomla this model.

/*comment pode vir antes */

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

Recalling that the @import is the first line before any selector. But there may be comments before it that will work too.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.