Issues with Google fonts and Sass compile.

Have you checked the variables and bootstrap files? They might be loading other fonts.

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

My variables.scss looks like this:

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Open Sans', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

I'm not sure where the bootstrap file is.

Have you tried with default url of Laravel if that working maybe the link with symbols is the problem of sass compiler.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

Unless you need them, maybe you can try commenting out variables and ~bootstrap/scss/bootstrap'

You could also try adding these lines to the end of your app.scss

...
// Bootstrap
@import '~bootstrap/scss/bootstrap';

body {
  font-family: 'Open Sans', sans-serif;
}

Nunito does render when I put that line back in the app.scss. So does that mean I need to escape some of the characters in the open sans url?

Does your app.scss look exactly like this now?

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

body {
  font-family: 'Open Sans', sans-serif;
}

@flightsimmer668

Yes, it does.

Just in case you are using the default Laravel welcome.blade.php view, know that it is also pulling in its own Nunito font and setting the font-family:

 <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

So if you're using the default welcome.blade.php you will need to remove that from the HTML and also link to the compiled css/app.css

If I manually correct app.css from:

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;
700&display=swap);@charset "UTF-8";

To this (just correcting the whitespace):

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap);
@charset "UTF-8";

Then Open sans renders correctly.

Shouldn't the url be quoted?

Is there any reason you need that @charset in there? If not, just remove it. Google's suggested import code does not have that in it.

And yes, quotes are also needed.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

You are right I am using the welcome.blade.php. I did not notice that and I did remove them.

I do not need it. But I'm not inserting it. It shows up after it compiles.

If you're using something like npm run watch, then there might be an issue with the build cache. Have you tried stopping and recompiling again?

I'm not running npm run watch. I've cleared the view:cache, cache:clear and the view:clear. But still getting the weird whitespace in app.css

This might give you more information about the issue: https://github.com/sass/sass/issues/1253#issuecomment-43484319

May I suggest removing the

// Fonts
// Variables
// Bootstrap

lines from app.scss and move the Open Sans @import directive to the bottom of app.scss

I removed the comments and moved the @import to the bottom. But it still gives that unquoted URL with the @charset.

Then something else in the scss is causing the SASS compiler to add that @charset symbol. Does the welcome page load with Open Sans now?

Thank you Flightsimmer668 for your help on this. I really appreciate it.

Unfortunately, it does not. I'm going to try a new laravel project from scratch and see if I can find any differences and maybe it's a problem of how I set it up.

So I started a fresh Laravel project and just changed the font and I still get the weirdly formatted app.css when I compile.

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;

700&display=swap);@charset "UTF-8";

Here are the commands I used to install. Serving on a virtual machine with ubuntu server running apache2.

composer create-project laravel/laravel quickstart --prefer-dist
composer require laravel/ui
php artisan ui bootsrap
npm install && npm run dev

Any thoughts?

Hi. I'll give this a try and see if I can reproduce the same on a fresh project. In the meantime, may I ask what you are using to compile the scss?

Thanks again flightsimmer668 ...I'm not actually sure laravel mix maybe? Sorry, this stuff is all new to me.

Here is my webpack.mix.js file:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

I reproduced according to the steps you described above and my compiled app.scss looks exactly like yours:

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;

700&display=swap);@charset "UTF-8";

As long as you setup your fonts in your files, I don't think this is a problem, though. In my test, I changed the font attributes of welcome.blade.php and it loads Open Sans properly.

That's what I'll do then. Thanks again for your help flightsimmer668.

@flightsimmer668

Awesome of you trying to help with this... way cool!

Just wondering if anyone has found out why Google Font imports leaves this @charset "UTF-8" in our css?

Seems to be harmless, but on a OCD level it's annoying, particularly because, if it's being done for a reason, I can't figure what that would be, I'd like to know I should expect it to happen.

Any feedback is greatly appreciated.

Hello @jochantrelle

I do not know what the reason for it might be. I could reproduce it at the time this question was asked. But on my more recent projects using Webpack + Laravel Mix + Sass the line does not show up anymore in my compiled CSS -- even while adding the Google font @import directive to the top or near the top of my SCSS file.

If it helps, my package.json files in these newer projects require the following:

"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"

Hey, guys! I've been following a year old tutorial and stumbled upon the same problem. Turns out, it's a bug in webpack which turns semicolons into new lines in quoted strings of '@import'. As a temporary solution until webpack gets fixed, you may switch to older syntax. Instead of

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap')

write

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap')

Notice the 'css2' vs 'css' and 'wght@400;700' vs '400,700'. The comma doesn't break the line. Worked for me.

You can follow issue here to get updates https://github.com/webpack/webpack/issues/10873

https://github.com/JeffreyWay/laravel-mix/issues/2430#issuecomment-653915587