cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
newmay
Helper V
Helper V

Embed Custom Fonts (as files)

Hi!

I want to embed custom fonts which I got as files:

newmay_0-1633344264532.png

I did create webfiles with these files as attached notes:

newmay_2-1633344335977.pngnewmay_3-1633344354490.png

Then I went to the portal editor and opened the mybootstrap.min.css, in which I inserted the css @font-face with references to the webfiles.

newmay_4-1633344448351.png

 

Unfortunately, when I clear the cache the font on the default home page of the custom portal did not change. Do I have to take further steps or delete default fonts in order to get them displayed?

8 REPLIES 8
hardikv
Super User
Super User

Hi @newmay 

 

Please remove ".." from url:

hardikv_0-1633345046295.png

 

Clear the cache and check please.

 

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

 

Hi! I did change it, yet I still dont recognize any changes.

newmay_0-1633349185449.png

newmay_1-1633349260290.png

 

hardikv
Super User
Super User

Hi @newmay 

 

Please use something like this:

url('/Whitneybold.otf');

 

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

Fubar
Solution Sage
Solution Sage

as suggested by hardikv as the Parent page is set to Home it would just be '/', but also if standard bootstrap etc is defining the CSS items also then you may also need to include the "!important" directive for each CSS element so your CSS isn't overwritten.

Hi @Fubar!

newmay_0-1633417031582.png

This should work right? Somehow I see no changes. 

 

When I look into default css and search for font-families there are plenty of default, do I have to add the font again manually to specific selectors as here in the img?

newmay_1-1633417243900.png

 

Hi @newmay 

 

font-family should be in single quote and just add the name of font:

@font-face {
    font-family: 'Whitneybold' !important;
    src: url("/Whitneybold.otf") !important;
}

 

 

Fubar
Solution Sage
Solution Sage

Also, make sure that you have cleared the Portal Cache after updating the file e.g <portal url>/_services/about (when logged in as Portal User with Administrators Web Role assigned).

And check that your file has pushed through from DataVerse to the Portal - <portal url>/<your css file name> 

Hi @Fubar 

 

I did it and I can download the webfiles via <portal url>/<webfile>. 

 

I pasted this code into css: 

newmay_0-1633612642278.png

 

That is one of the files: 

newmay_1-1633612734646.pngnewmay_2-1633612803966.png

 

the items still show the portal default e.g. 

.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
font-family: "Segoe UI Semibold", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.25em;
font-weight: bold;
}

 

and if I refernce it in whitin font-family nothing happens

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Users online (3,060)