How to Load Adobe Fonts in Rise 360

Code used in the video:

/* add to index.html in the <head>
<link type="text/css" rel="stylesheet" href="theme/adobefont.css">
*/


@import url("https://use.typekit.net/x-your-adobe-kit-link-x.css");


html body {
	
/* only apply to headings */	
  --font-family-head: "sztos-variable", sans-serif;
	
	
 /*  --font-family-body: "sztos-variable", sans-serif;
	--font-family-ui: "sztos-variable", sans-serif; */
 
}

/* This is to completely change font for other type that 'should' be included in the font-family-ui variable */


/*
html body, 
li .overview-list-item__title {
	font-family: "sztos-variable", sans-serif;
}
*/


/* my custom font styles used in video */

#app .lesson-header-wrap .lesson-header__title {
  text-transform: uppercase;
  font-variation-settings: "wdth" 111.7, "wght" 382;
  font-size: 51px;
}

Getting started with theme components? Download the blank theme component css file.
Watch: installing a theme component.


Posted

in