 Hey folks, one of the things that I find that we can do to really help our figures to stand out from the crowd is to alter the Fonts that we're using in the text embedded in the figure The other thing that setting the font does is it allows us to more reproducibly Generate our figure independent of what platform we're generating that figure on One of the things I noticed as we're building out our drought index visual is that when I used github actions to build this page The the font seemed a little bit off Compared to what I had been seeing when I was running it on my local computer So the version of the figure that I have on top of the web page here was generated on my Mac Using the fonts built into the Mac whereas the font for the web page is the font that must be the system Sans serif font that is on Ubuntu and yeah, definitely it the Ubuntu version is more spread out and Not as compact as the Mac version. I don't know why it is but I prefer the more compact version I'm pretty sure that the Mac version I'm using is aerial And I don't know what font this is there are people that can just look at a font and tell you what exactly it is That's not me anyway. I say I like that font. I don't like that font So what I would like to do is to specify the font and perhaps use something other than aerial to maybe give it a little bit More panache right and if I set the font on my local computer And then I set it using the workflow Then I'll have a reproducible font across both systems in addition to making it look just a little bit better We've done this in a previous episode of Code Club where we altered and modified the fonts using a package called show text We're gonna do that in today's episode. So I'm gonna start out by coming into my code So I notice I've got plot draw by a region that should be drought Right. So maybe what I'll do before I get going too much further is to fix that name So one temptation would be to go in and just manually add the tea that can cause problems with the commit history However, so what I'll do is get MV. So within the version control history We're gonna use MV to change code Plot draw by region to code and I'll use the tab autocomplete and then scroll back over to add the tea here The other thing I'll do is be sure to update my snake make file. Then I'll search for plot drought by region and blot add the tea there Save that that should all be good. And again, if we do get status We now see that we've modified our snake file and we've renamed that I'm gonna go ahead and commit this. So I'll do get add snake file. We're committing both Status. Yep. So both are staged. I'll do get commit hyphen m fix name of plotting script Great, okay. So now we want to go into plot drought by region and I'm gonna add library Show text and again, we don't have that installed into our conda environment So let's come over and do that. So I'll go ahead and do show text And it's gonna be our hyphen show text and then we'll do conda and then we'll click on this first link here And we see that sure enough We've got our show text as part of conda forge and it's version 0.9 So I'll go ahead and activate my environment. I'll do conda activate drought and then I'll do Mamba install hyphen C conda forge our hyphen show text So that all installed and that is show text 0.9 as we had hoped and so I will come into my Environment file here and we'll go ahead and add that and I'll add after the r markdown. I'll do our hyphen show text equals 0.9 Double check that because I have no memory. So that's good that way when we run our snake file up on github actions It will have show text as part of The environment very good. So we'll go ahead and save that and let's go ahead and load these libraries So we have show text loaded as well as everything else. So I'll open up a tab and we'll go fonts Dot Google comm and I think for the title I'd like a serif font and then for all the other text I want to use a sans serif font so I can come to categories and deselect all these options And I like this Roboto slab. I think that would be pretty nice bold font to have as my title So the command I'm going to use is font add Google and I'll then say Roboto slab and We'll do family Equals Roboto hyphen slab. There's a non slab Roboto, which is a sans serif font Run that to make sure it loads. So once we've added the font We need to go ahead and load it into the system. So we'll do show text underscore auto And again, that makes the font family available to everything else I can then come down to the theme and where I have plot dot title I can add to this family equals Roboto hyphen slab and then I'll want to go ahead and make sure I've got everything else run through this So that we can then generate our figure So I think that serif font of the Roboto slab looks pretty nice there in the title I'm going to stick with that again. What you pick is really a matter of personal preference What I'm trying to do is pick some fonts that we can install and we can use as an alternative to the default All right, let's go back to Google fonts and let's pick a sans serif font and so again, here's Roboto, which is the sans serif version of Roboto slab obviously one of the sans serif fonts that I really like is Montserrat So I'm going to go with that for my subtitles and annotations So again, we'll repeat what we did with this Roboto slab and we'll do font Add Google and we'll do Montserrat and then we'll have lowercase Montserrat All right, we'll load that and then we'll reload show text auto So we have all those fonts added and again What I'm going to do is come back down to where we set the theme and we had plot sub title, right? And here we'll do family equals Montserrat and maybe I'll put this on a separate line like that and Then I'll do the same thing for the caption Loading in the the family Montserrat we'll go ahead and save that let's run it and see what it looks like So I do like that appearance one thing I might want to do with our Roboto slabs Maybe make it a bit bigger We've got 18 point font if I recall. Let's see what happens if we go up to 20. I just feel like the text Is it just a little bit too close in size? So I think that is better. It makes the title a bit bigger Certainly stands out a little bit more over the subtitle and the caption there very cool One thing that I noticed however is that we do have labels here for our legend So we'll need to change that as well. So if we come to our legend text, we also need to add Montserrat there as well So we'll do a family equals Montserrat And there we go. We now have that Montserrat font. It's a subtle difference, but I like to keep things consistent Okay, so now our figure is all updated that looks good This is the index page as it is rendered on my local computer We haven't updated the figure yet Obviously, so we need to do that and then we'll also want to modify the text in the lower left corner here to be Montserrat as well So I'll do snake make dry run and we see that it wants to Rerun the plot drop by region. That's great and then render the index So we'll let it do that and I'll give it C1 for one processor And so here is the refreshed version where we've got our version of the figure baked into the page And we can of course see that the text in the lower left corner Isn't the right font so to fix that I'm gonna go ahead and shrink this page down a bit And we're gonna go ahead and open up our index.rmd file, right? So you'll recall that we had a code chunk here CSS that produces the styling on our page And so normally down here we would do something like font family and then sands hyphen serif And that's the default right, but we want to use Montserrat instead. So what we might want to do is something like Montserrat And then sands serif and I think maybe Montserrat needs to be in quotes I don't know anyway So what we need to do is we actually need to install Montserrat or get it installed when the page renders And so we can do that up here by inserting some link Tags, but to get those link tags We need to come back to Google fonts and again, we were using Montserrat within Montserrat if I scroll down There's a variety of different weights that we can get. I think the 400 looks pretty nice I'll go ahead and click on that and so over on the right side then it gives us those link tags that we can use So I'll go ahead and copy that and then we'll paste that into here and again We're using family Montserrat. I'll go ahead and save that and again I did put Montserrat comma sands serif and what that means is that if for some reason it can't get Montserrat from Google fonts, it'll instead use sands serif. So again, I'll go ahead and rerun Snakemake to rebuild that index file. And so now what we see in the lower left corner Is that the text is no longer aerial But it is in Montserrat font and I'm pretty happy with the way that looks again You wouldn't look at this and say oh well pat made that an R Because it's obviously using our fonts and our styling We've like really changed a lot of the styling here in this figure The final thing that I want to do of course is let's go ahead and push this up to github and see what it looks like Once it's rendered with github actions. So again, let's do git status Let's make this a bit bigger and I'll go ahead and do git add Period to add all these things again. The period always makes me worried I insist on running git status before git add period just so that I know what I'm adding And then again git status all looks good git commit and we'll do customize fonts on figure and page And we'll do a git push and then in a few hours once this has run for the day We'll check back in and make sure that the final web page that is up on the web Actually renders the way it looks down here on our computer So we see that sure enough after github actions did it this thing for the day that we do get that updated version of the figure with the roboto slab title the Montserrat sub titles As well as that legend and the lower left corner caption. So this all looks really good I'm pretty happy with the way this appears There's a few other things that I'd still like to tweak about the figure and how we've done the analysis So that you don't miss that episode Please please please make sure that you've subscribed to the channel You click the bell icon so you're alerted of all the notifications more than anything What would mean the world to me is that if you went out and told your friends about what I've been doing here on code club And share this playlist with them that I'm showing over to the side I think they'll really get a lot of great tips out of it really helpful motivation for thinking about reproducibility Automation and all the great tools that we can use to make it happen So thanks again, and we'll see you next time for another episode of code club