Embed Custom Fonts (as files)

(0) Share

Report

Posted on by Community Power Pla...

Hi!

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

I did create webfiles with these files as attached notes:

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.

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?

All responses (8)

Answers (0)

Community Power Pla... on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

Hi @Fubar

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

I pasted this code into css:

That is one of the files:

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
Fubar 8,010 Super User 2025 Season 1 on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

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>
H V 1,510 on at

Like (0)

Report
Re: Embed Custom Fonts (as files)

Hi @Anonymous

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; }
Community Power Pla... on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

Hi @Fubar!
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?
Fubar 8,010 Super User 2025 Season 1 on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

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.
H V 1,510 on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

Hi @Anonymous

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!
Community Power Pla... on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

Hi! I did change it, yet I still dont recognize any changes.
H V 1,510 on at

Like (0)

Report

Re: Embed Custom Fonts (as files)

Hi @Anonymous

Please remove ".." from url:

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!