Can't load multiple fonts from google font API

.loadFonts() when (@importGoogleFonts) {
  @import url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}');
}

@googleFontName    : @fontName;
@importGoogleFonts : true;
@googleFontSizes   : '400,700,400italic,700italic';
@googleSubset      : 'latin';

@googleProtocol    : 'https://';
@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';

If I set @fontName to multiple values, or use different fonts for @pageFont and @headerFont, the @googleFontRequest will not work.

I have checked the Google font API, a working request URL may be like this: font-1:@{googleFontSizes}|font-2:@{googleFontSizes}|font-3:@{googleFontSizes}&subset=@{googleSubset}

[eveevans]

I did it directly changing the@googleFontRequest:

@headerFont        : 'Pragati Narrow', sans-serif;
@pageFont          : 'Poppins', sans-serif;
@importGoogleFonts : true;
@googleProtocol    : 'https://';
@googleFontRequest : 'Poppins:400,500|Pragati+Narrow:400,700';

That will generate the exact line for include fonts: @import url('https://fonts.googleapis.com/css?family=Poppins:400,500|Pragati+Narrow:400,700');

[awgv]

Hi @tarvos21, I’m not familiar with Google Fonts, as I tend to self-host the fonts, but have you tried changing @googleFontRequest to make it look like the suggested Google Font API request?

.loadFonts() when (@importGoogleFonts) {
  @import url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequestLato}|@{googleFontRequestAnotherFont}');
}

@latoFontName: 'Lato';
@latoFontSizes: '400,700,400italic,700italic';
@latoSubset: 'latin';
@googleFontRequestLato: '@{latoFontName}:@{latoFontSizes}&subset=@{latoSubset}';

@anotherFontName: 'Another Font';
@anotherFontSizes: '400,700,400italic,700italic';
@anotherFontSubset: 'latin';
@googleFontRequestAnotherFont: '@{anotherFontName}:@{anotherFontSizes}&subset=@{anotherFontSubset}';