pulling google fonts through npm not working but CDN dose

in my app i'm pulling a couple of google fonts through npm like this

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Baloo+Bhaijaan|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Katibeh|Lalezar|Lateef|Lemonada|Mada|Markazi+Text|Mirza|Rakkas|Reem+Kufi|Scheherazade|Tajawal');

then i did npm run production, and it look like the font where included on my compiled app.css

@import url(https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Baloo+Bhaijaan|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Katibeh|Lalezar|Lateef|Lemonada|Mada|Markazi+Text|Mirza|Rakkas|Reem+Kufi|Scheherazade|Tajawal);

on my front end page i have included the compiles app.css i have this

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">

now all css stylesheet are loaded correctly except google font, All font are not being changed and i cant see the effect of google fonts across the entire front end.

strangely enough if i include google fonts as CDN i can see fonts taking effects ???

any ideas ???

bobbybouwmann

6 years ago

Level 88

This should work perfectly fine

// Google Fonts
@import url(https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Baloo+Bhaijaan|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Katibeh|Lalezar|Lateef|Lemonada|Mada|Markazi+Text|Mirza|Rakkas|Reem+Kufi|Scheherazade|Tajawal);

// Font Variables
$amiri: 'Amiri', serif;   
$cairo: 'Cairo', serif;   
$harmattan: 'Harmattan', serif;   

// Styles
body {
    font-family: $amiri;
}

Well, you get the idea ;)

jlrdw

6 years ago

Level 75

See if anything here helps: https://github.com/JeffreyWay/laravel-mix/issues/613

Please or to participate in this conversation.