How to use @import in a CSS file?

The @import line must be the first line in your .css file. If you enter any information before (for example, comments), @import will fail.

At most, you might have

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

before your @import .

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

Then you must specify the source path provided in Google Fonts , shortly after the font is installed and ready to be used. It is important to note that we have to use the specific name that the site provides to function correctly. In my example, I used the Titillium source by Google Web Fonts . See:

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

Note that @import is a CSS element, so it can stay within a <style> tag in head of its 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 sources, we also have the facility, without having to download anything, just by copying the path of the desired source that is already hosted on google servers and specifying your name in your CSS file.

Refresh:

• Using WebFonts in Email Marketing

As already mentioned by @woliveirajr, @import must be in the first line of the file.

Just a comment: Remember to consider that @import can have a negative impact on your site's performance. According to a Steve Sounders post , unlike the <link> tag %, if you have multiple commands @import in sequence, they may not be loaded in parallel the moment your page is opened.

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

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

Using Joomla template.

/*comment pode vir antes */

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

Remembering that @important is the first line before any selector. But there may be comments before it will work as well.