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
