Why do some css @import commands use url() while others just place the string

Question

Example directly from my CSS file:

@import 'https://fonts.googleapis.com/css?family=Lato:700';
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');

I purchased a beautiful theme for my WordPress site and some of the CSS fonts are imported like that. I am combining all these, and I'm just not sure of the difference.

I did some research and notice that Mozilla also flips between the 2 in their examples.

Steven B. · Accepted Answer · 2017-03-18 20:12:16Z

3

From W3 specification:

The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):

@import "mystyle.css";
@import url("mystyle.css");

answered Mar 18, 2017 at 20:12

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

axiac · Accepted Answer · 2017-03-18 20:14:37Z

0

Both ways are correct and they are equivalent.

This is a quote from W3C: Cascading Style Sheets (CSS) — The Official Definition:

The syntax of @import is:
@import [ <url> | <string> ] <media-query-list>? ;
Where the <url> or <string> gives the URL of the style sheet to be imported, and the optional <media-query-list> (the import conditions) states the conditions under which it applies.

If a <string> is provided, it must be interpreted as a url with the same value.

answered Mar 18, 2017 at 20:14

axiac

73.4k11 gold badges121 silver badges150 bronze badges

Collectives™ on Stack Overflow

Why do some css @import commands use url() while others just place the string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related