Boost: How to use Google font in .scss file

Boost: How to use Google font in .scss file

by Glenn Pillsbury -
Number of replies: 3

Hi all,

Using Moodle 3.3.

I need help with the syntax to import a Google font into my Boost look.  Here's what I've been able to find from searching these forums (modified for my font):

$web-font-path: "https://fonts.googleapis.com/css?family='Roboto+Slab':400,700" !default;
@import url($web-font-path);

I've tried putting the $web-font-path line toward the top of the .scss file with the other variables.  I've tried putting the @import url immediately after the @import "moodle" line.

However, when I upload and select my file in the Boost settings, the site is totally hosed with no CSS used at all. Removing those two lines restores the CSS.  So, I'm obviously not understanding where those two lines go in the .scss file.

Can anyone point me in the right direction? Thanks!

Average of ratings: -
In reply to Glenn Pillsbury

Re: Boost: How to use Google font in .scss file

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

This is a known bug

https://tracker.moodle.org/browse/MDL-57875

Workarounds:

1. Put the @import url statement in the <head> of a layout file

OR

2. Put the @import url statement in a /style/ .css file (That's the approach I took in Waxed)

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Boost: How to use Google font in .scss file

by Mihir J -

Hi

You can also, directly put the import url in the 'Advanced HTML' / HEAD section from site-administration. Then add a custom css to use those fonts whereever you want

thanks!

Mihir

Average of ratings: -
In reply to Mihir J

Re: Boost: How to use Google font in .scss file

by Malena Guarnieri -

Hi Glenn, as Mihir says, you can put it in your customed css. I have aardvark theme in a 3.1 moolde, and this is de css for the fonts:

/* latin-ext */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 200;

  src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr8iECVzy6_x5mCR1UJr_CgI.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 200;

  src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wprwWgvz7nq97YPMIWeoEnHDE.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

/* latin-ext */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 300;

  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr9INifKjd1RJ3NxxEi9Cy2w.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 300;

  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr4-67659ICLY8bMrYhtePPA.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

/* latin-ext */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 400;

  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://fonts.gstatic.com/s/titilliumweb/v4/7XUFZ5tgS-tD6QamInJTcSo_WB_cotcEMUw1LsIE8mM.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 400;

  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://fonts.gstatic.com/s/titilliumweb/v4/7XUFZ5tgS-tD6QamInJTcZSnX671uNZIV63UdXh3Mg0.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

/* latin-ext */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 600;

  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr_SNRT0fZ5CX-AqRkMYgJJo.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 600;

  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr46gJz9aNFrmnwBdd69aqzY.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

/* latin-ext */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 700;

  src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr-y7CP8YvcHYdGV61pt7QTE.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 700;

  src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wprxP6Eu1_xfSBSoi9uie1FdE.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

/* latin-ext */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 900;

  src: local('Titillium WebBlack'), local('TitilliumWeb-Black'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr4raJW_TPRbuWfMPkVNer-Y.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 900;

  src: local('Titillium WebBlack'), local('TitilliumWeb-Black'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6C95lFCEhr9IpXC9cjRuaU.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

I hope you find it useful.

Regards.

Average of ratings: -