cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate I
Advocate I

D365 Portal - Google Font

Hey everyone - I've read any and every article I could on adding a custom google font to a theme.css file for portals and I can't seem to get anything to work. Can someone help break down exactly what I need to do in order to get a new font in my D365 Portal?

 

Much appreciated!

3 REPLIES 3
Highlighted
Community Support
Community Support

Re: D365 Portal - Google Font

Hi @bdelatorre ,

 

Generally, you should create a new Web file for the custom font, upload the font as an attachment into the Web File record. Then modify the .css file to add custom font in it.

The Detailed Steps shared by Oliver Rodrigues. SeeDynamics 365 Portals - using custom fonts 

 

Create a Web File record for your custom font, for me, I am setting the following properties in the record:

  • Name: <custom font name>
  • Website: <website name>
  • Parent Page: <Home Web Page>
  • Partial URL: <custom font name>
  • Publishing State: Published
  • Enable Tracking: No
  • Hidden from sitemap: Yes
  • Exclude from search: Yes
  • all other: default

Upload the font as a note attachment into the new Web File record

Now for associating with your .css you have 2 options:

  • Change your main .css file, by default, is the bootstrap.min.css by adding the following line (this is also a Web File record, the .css file is located in the notes as well😞 
@font-face {
    font-family: '<custom font name>'; 
    src: url('../<custom font name.ttf>');
}

OR you can specify it for a unique Web Page

  • Navigate to your Web Page record, you will see 2 records with the same name, open the child record (is root = NO)
    • Navigate to the Advanced Tab, and set the same lines of code in the Custom CSS field
@font-face {
    font-family: '<custom font name>'; 
    src: url('../<custom font name.ttf>');
}

If you have a font in a public website, there is no need for creating the Web File and Upload the font, just point it in the Source of @font-face property directly in the .CSS

There we go, just clear your Portal cache and refresh the page, the custom font is now available

 

Hope this helps.

Sik

Highlighted
Advocate I
Advocate I

Re: D365 Portal - Google Font

I have read these instructions previously. I am clearly missing something... where do I grab that src url? I download the google font zip and save the regular font ttf file and upload that as a note attachment to my new webfile. I went to adjust the bootstrap css but I think my source url is incorrect...wf.PNGbootstrap.PNG

Highlighted
Advocate I
Advocate I

Re: D365 Portal - Google Font

@v-siky-msft how do I figure out if my src url is correct? Do the steps I laid out look correct?

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (11,079)