Use Custom Fonts in Jetpack Compose Apps!

Salam friends welcome back to the Channel all with uni in this video you are going to see how you can use custom fonts in Jetpack compos let's get started so here we have simple application just contain a text we are going to try simple font here so of course we need the fonts so for example you can find fonts on Google fonts right to contain many fonts and here you can see that some fonts present as font family so we have different shapes for different usages bold regular light for example fan and so on you can click here to download the fa and then click here and in the resources section try to add the new resource here new and use Android resource directory and here select font it's just the usual one for adding fonts into Android and then copy all the fonts and put them here you don't have to copy all of them you can copy maybe the major Styles and here make sure that the names are in lowercase letter and they don't contain such dashes you can only include underscores so here our font time amilies you are going to use now if you want to use one of these fonts directly into your text you need to create the following you need to create something called font family you can create it as top lever into the UI for example here in the typography the typography is different from font family because typography contains lot of stuff it contain the weight it contain the size and contain well the family here we need to create the Family itself so we can call it maybe Popin family and here we can create an object called font family right this come from the compos and here we can start by adding our fonts font by font for first one for example we can include the font here and here as a font we need to provide the following there there are multiple ways we are going to provide the W that contains a resource ID so we can provide black and here we can use usually the weight so there is font weight and here I can specify that this is black why we need to do that because later on when we use this font family we can specify which font font we you are using and you can duplicate that for all of the remaining fonts so here is the font family created for us now what you can do the following you can go back here in the text and here there is something called font family we can use so we can use it directly which is popins font as it is but if you want to specify for this text I want to use the Poppins family of course but for specific R can specify it here you can use the weight font weight and of course you can specify font weight for example semi bolt or light so it will use the variation of the semi Bolt from that font into our Android application so let's rerun it so here as you can see we are actually using the font now the font is little bit small so we can increase it now the size of the font doesn't matter when we are talking about the font family okay so you can specify it on your own but we can add an extra step we are going to show it you can add an extra step to control all of this variables together using the theme typography so here I can specify the size the font size and can specify something that is visible example 36 DP sorry SP and run it now as you can see we have really cool looking text hello YouTube now if you want to take this to the next level because let's say you want to preserve some kind of consistency right whenever you show titles for example you want to show them with the same font weight family of course and also the size here it doesn't depend directly on the custom font well custom font you use it for that purpose but you need to push that into the theme specifically so you don't use Font family weight and size you use only something called the style directory which is the text stle here we can get it from something called the material theme and here we do have something called typography and for the typography we have specific things for example header one two body one two button caption and stuff like that this is generic for the material theme because in material theme you do have this concept if you do have other custom theme which is Custom Design system maybe you have different styles it depends on your circumstances of course so so here I suggest watching the video of custom design system in which you can create your own typography names so you can refer with other names for example if one of my project I'm we are using the heading one we are not using H1 for example but this is up to you of course now we want to set specific values to H1 the way to do that is like the following we go here to the type and here we are providing this typography why we are providing this typography because if you can see we are providing this from the app Theme we are using the material theme that's why you are accessing that using material them okay so here is the typography are specifying you can specify a lot of things for example I can specify the H1 right I can use the text style normally and here I can specify what font family I want to use for example here it would be the Poppins now here the Poppins need to come before it just matter of initialization awesome next we can specify other things for example the font weight and I can use also the font size for example I want this 24 SP for example and that way can bring consistent H1 for example in all of my views and this is a beauty so I can specify only H1 here and I will guarantee that it will use the right font with the right text size and also the right weight and this is the beauty of Jetpack compos and as you can see we are using our custom font with specific font weight and also specific font size so this is kind of best practice we can use to implement a consistent and goodlook UI while including this typography aspect of course so that's it for this video thanks a lot for watching watching this video to the end if you didn't join my Discord server you can join it here in the description below thanks a lot for watching this video to the end don't forget to subscribe to the channel as always and see you in the next videos Salam

Channel: Charfaoui Younes

Views: 3,582

Keywords: android tutorial, android clean code, android model view view model, android mvvm, android, studio, development, dev, app, data, views, jetpack, library, explained, explain, how to, guide, tutorial, kotlin, java, mobile, splash, screen, fetch data, network, animate, animation, compose, api 31, api, android 12, api 21, splash screen, android splash screen, splash screen android studio

Id: vVrNmM-dtsc

Length: 5min 49sec (349 seconds)

Published: Tue Oct 24 2023