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?

Improve this question
4
  • you could start by checking if it is correct by looking at your browsers network tab using the dev tools Commented Jun 6, 2017 at 15:21
  • @glls Could you be a bit more specific maybe? Thanks Commented Jun 7, 2017 at 10:55
  • Google the last 10 words of my sentence. Commented Jun 7, 2017 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? Commented Jun 7, 2017 at 15:25

3 Answers 3

Reset to default
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);
}
Improve this answer
1
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.

Improve this answer
3
  • Hi, thanks for the suggestion but my font is not available at google fonts. So this wont work for me. Any other ideas? Commented Jun 16, 2017 at 8:34
  • What do you mean about Google font? Commented Jun 16, 2017 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 Commented Jun 19, 2017 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

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.