SharePoint Page Layout CSS Error "invalid or empty reference to a Cascading Style Sheet"

[Darian Glover]

When encountering the following error after creating a SharePoint page layout the cause may be how you are calling a font as a style sheet.

An invalid or empty reference to a Cascading Style Sheet file was specified. Valid references must specify only a filename that ends with a ".css" extension

In my situation the offending line of HTML was as follows:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700|Source+Sans+Pro:300,400,500,600,7..." rel="stylesheet" type="text/css" />

As you can see above, the href attribute's value does not end with a ".css" extension. While it is easy to add ".css", and it does not appear to break the use of fonts within the web page, the next error you would encounter is:

styles/https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700|Source+Sans+Pro:300,400,500,600,7... contains invalid character '?'.

The workaround is to reference Google Fonts within a style sheet using "import".

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700|Source+Sans+Pro:300,400,500,600,7...');

[#2]

Thanks for sharing but be aware you also have to add Google to the save url's else it will not work