D365 Portal - Google Font

[Anonymous]

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!

[v-siky-msft]

Hi @Anonymous ,

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

[Anonymous]

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...

[Anonymous]

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