Menu icon Foundation
Adding Google fonts

I'm having trouble adding Google Fonts. I'm adding @import url(http://fonts.googleapis.com/css?family=Lato:300,700); to app.scss file.

I'm updating the _settings file:

// We use these to define default font stacks
$font-family-sans-serif: font-family: 'Lato', sans-serif;

and the global styles:

// We use these to control various global styles
// $body-bg: $white;
// $body-font-color: $jet;
$body-font-family: $font-family-sans-serif;

And it is giving an error in Codekit of:

Error: top-level variable binding must be terminated by ';'
on line 90 of Users/bens_photo/Documents/Websites/hipster-foundation.dev/scss/_settings.scss
>> $font-family-sans-serif: font-family: 'Lato', sans-serif;

Am I missing something here?

F5Foundation 5Google Fonts

I'm having trouble adding Google Fonts. I'm adding @import url(http://fonts.googleapis.com/css?family=Lato:300,700); to app.scss file.

I'm updating the _settings file:

// We use these to define default font stacks
$font-family-sans-serif: font-family: 'Lato', sans-serif;

and the global styles:

// We use these to control various global styles
// $body-bg: $white;
// $body-font-color: $jet;
$body-font-family: $font-family-sans-serif;

And it is giving an error in Codekit of:

Error: top-level variable binding must be terminated by ';'
on line 90 of Users/bens_photo/Documents/Websites/hipster-foundation.dev/scss/_settings.scss
>> $font-family-sans-serif: font-family: 'Lato', sans-serif;

Am I missing something here?

Tim Hartwick over 4 years ago

Hey Ben,
The error you're receiving seems to be from a missing semicolon somewhere around line 90 of your _settings.scss file. While I'm not quite sure why this is happening without seeing your code. One thing to note though, make sure you're importing your font before you declare your font-family.

If you're importing in "app.scss" make sure that it happens before the "@import 'settings';" rule.

If you're still having issues, can you copy and paste the settings.scss typography section, as well as your app.scss file.

Hope this helps!

Ben Siegfried over 4 years ago

Yes, this is what I have in app.scss:

@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
@import "settings";
@import "foundation";

This is line 90-91:

// We use these to define default font stacks
$font-family-sans-serif: font-family: 'Lato', sans-serif;

I've retyped all colons and semi-colons to make sure they weren't corrupted as a character.

Ben Siegfried over 4 years ago

Tim,

```SCSS //
a. Base
// - - - - - - - - - - - - - - - - - - - - - - - - -

// This is the default html and body font-size for the base rem value.
// $rem-base: 16px;

// Allows the use of rem-calc() or lower-bound() in your settings
@import 'foundation/functions';

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
// $base-font-size: 100%;

// The $base-font-size is 100% while $base-line-height is 150%
// $base-line-height: 150%;

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true;
// $include-print-styles: true;
$include-html-global-classes: $include-html-classes;

// b. Grid
// - - - - - - - - - - - - - - - - - - - - - - - - -

// $include-html-grid-classes: $include-html-classes;
// $include-xl-html-grid-classes: false;

// $row-width: rem-calc(1000);
// $total-columns: 12;
// $column-gutter: rem-calc(30);

// c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - -

// We use these to define default font stacks
$font-family-sans-serif: font-family: 'Lato', sans-serif;
// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;

```CSS  
@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
@import "settings";
@import "foundation";

Tim Hartwick over 4 years ago

Thanks for the reply! I'm not quite sure what's going on. This may sound dumb, but can you try wrapping 'Lato' in double quotes like this:

$font-family-sans-serif: font-family: "Lato", sans-serif;

Ben Siegfried over 4 years ago

Just tried that and it doesn't work.

I went over all of the steps again as if I were doing from the start and it still doesn't work.

Bizarre.

Anyone from Foundation care to step in?

Tim Hartwick over 4 years ago

Hey just realized what's going on! Line 90 should look like this:

$font-family-sans-serif: "Lato", sans-serif;

Sass doesn't let you store the property in variable, just the value. For example you would use something like:

p {
  font-family: $font-family-sans-serif;
}

Ben Siegfried over 4 years ago

Yep, you're right! Hey, I've had a very rough day with other things while trying to figure this out. Thanks so much for seeing this, it really makes a difference in my day!