[00:00] In this lesson, we'll take a look at how the Advanced Stylesheet can help you use custom fonts in your Perspective projects. One important thing to note as we get set up is that the Stylesheet editor doesn't support auto- complete CSS syntax, so prior knowledge of CSS is necessary to get the most out of the Advanced Stylesheet feature. We'll start by setting up our Advanced Stylesheet, then we'll import our custom fonts from the Google fonts site, create a project-wide base font style for our components, and look at how you can override or modify base font styles with either user-created style classes or DOM id. To enable the Advanced Stylesheet, let's go into the Project Browser and right click on the Styles folder. Select Enable Advanced Stylesheet from the menu. The stylesheet.css resource will appear under styles in the Project Browser. Once in place, the stylesheet allows us to treat it like any normal CSS file. I'll just place some comments in there to keep everything organized as we progress.

[01:07] Now, let's look at the Advanced Stylesheet in action with custom Google fonts. In my designer, I have three labels here in a new Perspective view. I want to style each label with a different custom font. In order to use custom fonts, we first need to import the font into our Advanced Stylesheet. I already have some Google fonts in mind, so I'll go to fonts.google.com first. I'll need their import URLs, so I'll start with the Roboto font here as an example. I'll select Get Font, then click on Get Embed Code. I don't need all these different styles for the Roboto font, so I'll click Change Styles and turn off this top slider here. This will ensure I just get the regular Roboto font when I select @import to get my embed code. We'll need to copy the @import URL part of the display and paste that into the top of our Stylesheet. I already have the information for the other two fonts I want to use, so I'll just paste those in here as well.

[02:06] You can put all of your chosen fonts in your shopping bag on the Google fonts site to get the composite import URL instead, if you prefer. One note of caution, though. It may affect performance slightly more than using the individual import URLs. For my project, it would look like this, with each custom font family separated via ampersand. Let's make a project-wide base font style to get us started, and then we'll explore how user-created style classes can help us add a different custom font on each label component. I'm going to use the special prefix ia underscore and target my label component like this. The prefix ia underscore is reserved for the base, predefined styling that's built into Perspective. If you're not sure which selector to target for a component, you can use the dev tools in the browser to help you drill down to individual classes or IDs in the code. Once I have my class selector, I can paste in some custom styles that I want to apply to all labels across my entire project, including one of my custom fonts.

[03:10] Let's say I'm designing these labels for a winery, and we really want our custom font choices to stand out within that theme. This is targeting the CSS class selector for the label component, so we can see the results immediately when we save the changes and go back to the view. Perhaps we want to apply this standard style to most of our labels, but we're also looking for an easy way to use different custom fonts in certain situations. To do this, we'll create some custom font style classes in our stylesheet. If you're trying to target a user-created Style class, you'll need to add the prefix dot PSC dash to the name of your user created style declaration in your Advanced Stylesheet. I'm going to call this dot PSC dash myNewFontStyle and paste in a few styles, focusing on our custom Playwright font family. We'll need to add our new style class name without the dot PSC dash prefix within the Perspective Property Editor to see the changes, so I'll make sure my label component is selected and attach this new class under either the Style or Text Style field in the Property Editor.

[04:17] Next, let's use a custom font with a specific component by assigning a unique Document Object Model Id or domId to it. I'm going to select my label and go to my Perspective Property Editor. We'll go to the Meta section in the Property Editor and click on Add Meta Property. Select Properties -> DOM id, and it should appear at the end, under the Meta Properties section. We'll give the domId a unique name and hit Enter. I'm going to call this arsenalLabel. In our Stylesheet, we can then target the domId we created for that element. Let's add our last custom font, ArsenalSC, along with a few other styles, and save. For domId, the change will take immediate effect on save. We'll switch back to the view to see our new winery label looks.

[05:06] In this lesson, we were able to import and use custom fonts for our labels with ease using the Advanced Stylesheet. Whether it's a custom font, a new color scheme, or a compelling animation, as we'll see in future videos, Advanced Stylesheets give you extraordinary freedom and flexibility in styling.