Font not updating

[blevine11]

I downloaded the sample designer app to give it a try, but I'm unable to update the font when following the directions in the documentation. Here are the steps I followed:

1. Downloaded roboto fonts and added them to the fonts folder.

2. Within _fonts.scss I added the followoing.

Code: Select all

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
      url('./fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('./fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
      url('./fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
      url('./fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
      url('./fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
      url('./fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('./fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('./fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
      url('./fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
      url('./fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
      url('./fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('./fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
      url('./fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
      url('./fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
      url('./fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

3. In _variable.scss I updated fontFamily.

Code: Select all

//Global
$fontFamily:"Roboto","Helvetica Neue",sans-serif;

When the app refreshes all fonts are set to: "Open Sans","Helvetica Neue",sans-serif

Any idea what I'm doing incorrectly here?

[blevine11]

Figured out the issue.

In the example app the font is being set in layout.css and not within theme.css.

Therefore, if you follow the instructions in the docs, you won't see the fonts update in the example app.

[mert.sincan]

We'll check and get back to you.

[cagatay.civici]

I guess you have a misunderstanding, changing the $fontFamily variable only effects the components, layout is fixed to Open Sans. Still to prevent confusion, we'll also apply that variable to layout as well.