Friday, September 16, 2016

Using Custom fonts in SharePoint

You can use the custom fonts in SharePoint applications ,below are the few things you may have to perform in order to get the new stylish fonts which you want to display to your users in your application .

My experience was to try use the "Avenier" fonts ,this is a paid font and it is been widely used these days .

1)I received the few packages like "Avenir Next Condensed.ttc" "Avenir Next.ttc" "Avenir.ttc"
2) If you try to use these package directly on to your site it will not work ,as the the extension of the file says it is a collection  "TrueType collection font file" .
3)Hence use some tools (many tools are readily available online)  to convert the truetype collection font file to "TrueType font file.
4)What it basically does it breaks the collection of files into individual files (ttf from ttc)
5)Now there are many different formats of font file you can use in your application
6)I have again used the online converter and converted my ttf  files to ".woff"  format
7)Upload these files in any of the document library (eg: site assets"
8)Now you are ready to use your new font in your css file as below

@font-face {
      font-family: "ThiloshNewFont";
      src: url("http://SiteCollection/SiteAssets/HLS-LEAD-FontFamily/AvenirNext-DemiBold.woff");


using in the custom class as below 


.testNewclass
{

     font-family: "ThiloshNewFont";

}


So now in which ever HTML element you use this ".testNewClass" the font style applied will be  "AvenirNextDemiBold"