Semantic-ui: Can't load multiple fonts from google font API

[tarvos21]

.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}

[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}';

[tarvos21]

Yeah, @Banandrew, thanks for your great suggestions, it should work, this is an issue for possible improvement.

[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');

[Laughlete]

I'm doing what eveevans has suggested, I run a gulp build, I see the CSS changed in my browser upon 'inspect element', but the fonts still aren't changing. My understanding is the fonts would be imported upon gulp build. Is there something I'm missing?

[awgv]

@Laughlete Hi, you can check what fonts are being loaded on the developer tools’ network tab—hover one of the font requests there to see the address, which should contain the font name. If it’s Lato, then something’s wrong.

Where did you put the variables? They should go into installation_folder/src/site/globals/site.variables if I’m remembering the structure correctly. Also, if you want to use only one font for headers and the body text, you only need to change @fontName and maybe @googleFontSizes—here’s the source of it all:
https://github.com/Semantic-Org/Semantic-UI/blob/146d960a249d43d68ce78dffb3e1abf3b00b1f1d/src/themes/default/globals/site.variables#L5-L21
You only need to override @importGoogleFonts with false if you want to self-host the font, setting it to true does nothing, because it already is.

[Laughlete]

@Banandrew I'm using react-create-app for my application and it doesn't seem to be including the google font into the bundle unless I eject my project, which I don't want to do.. For the time I have to import the font via <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">