7

I am trying to include a custom font in my lightning components. Unfortunately I am not managing in doing that. I uploaded a .eot file to my static resources and now I am trying to reference to it. Like this:

.THIS .font { 
     font-family: GothamBold;
}

@font-face {
     font-family:'GothamBold';
     src: "{!$Resource.B2B_Partners_GothamBold}";
}

I believe the src is the correct path, but what is going wrong? Or does anyone have a tip on how to include the font GothamBold in my lightning components. Or is there somewhere a tutorial on how to include a custom font as a static file in a lightning component?

  • you could start by checking if it is correct by looking at your browsers network tab using the dev tools – glls Jun 6 '17 at 15:21
  • @glls Could you be a bit more specific maybe? Thanks – Ant Jun 7 '17 at 10:55
  • Google the last 10 words of my sentence. – glls Jun 7 '17 at 11:10
  • This does not help me unfortunately. Do you have any other advice/examples on how to include a custom font as a static file in a lightning component? – Ant Jun 7 '17 at 15:25
7

Uploading a .ttf file to my static resources and including it as follows worked for me:

.THIS .boldFont {
 font-family: GothamBold;
}

@font-face {
   font-family: GothamBold;
  src: url(/resource/B2B_Partners_GothamBold);
}
0

This could help you even if you're kind of doing the right way:

http://www.minerva18.com/blog/using-custom-fonts-lightning-components/

The difference is the use of local() and format().

Also the idea ( @glls ) to double check your browser network if font has been fetched is a good idea.

I haven't found documentation about expression in CSS file, maybe it is not supported. Then cf. @glls solution.

Edit: you should also try inline CSS in your markup, so you're sure expression works.

  • Hi, thanks for the suggestion but my font is not available at google fonts. So this wont work for me. Any other ideas? – Ant Jun 16 '17 at 8:34
  • What do you mean about Google font? – Simon Placentino Jun 16 '17 at 16:18
  • The video you shared shows how to include a font from google fonts. But the Font I need (GothamBold) is not on there. So I cant use the technique used in that video – Ant Jun 19 '17 at 7:18
0

What I had to do to get it working was:

  1. Save the font file (.ttf) as a static resource
  2. Print/console log the URL for that font file using {!$Resource.SalesforceSansRegular} —SalesforceSansRegular being your static resource's name. You can print it by putting the expression in any part of your component— and then copy the outcome to clipboard.
  3. In your CSS file just add the following code:
@font-face {
    font-family: 'SalesforceSans Regular';
    src: url('/sfsites/c/resource/1500394667000/SalesforceSansRegular');
    /*The URL that I am using here is the output of {!$Resource.SalesforceSansRegular}*/
}

.myFontClass {
    font-family: 'Salesforce Regular';
}

Just replace my URL with the one your {!$Resource.SalesforceSansRegular} returned

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.