How to use user uploaded font in custom html code

Ask the community
,
1

Hello,
I’m designing a custom navigation menu bar using html code. I want to know how I can use the fonts (SF Mono) that I have uploaded to the Wix Editor, in my custom html code for menu options. Please note that I am new to coding and have no prior experience. I’d immensely appreciate any help offered.

2

Hi,

Locate the font url and use it in your code.
It should look similar to this:

[u]https://static.wixstatic.com/ufonts/d5bd8d_033912c8070946f6a935138086facec4/ttf/file.ttf[/u]

3

Hi,

I’m still wondering how to locate the font url? Is it my own domain instead of static.wixstatic.com and where can I find it?

4

For future reference, this is how to found your font urls. Go to your published site in Chrome, open DevTools, go to Sources tab, look for static.wixstatic.com, and navigate the ufonts folder until you find your file.ttf (or whatever file extension your font has). Just right click on it and copy link address.

5

@Ido (Wix)

I’m also trying to do the same thing with a dynamic page:

$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
let currentItem = $w(“#dynamicDataset”).getCurrentItem();
let value = $w(“#textTitle”).text;
$w(“#textTitle”).html = ‘’ + value + ‘’;
});
})

Polaris is the font I have uploaded to the site, but in this case the published page doesn’t seem to be using it. Any thoughts?

6

Not talking for Wix, but I found this workaround:

The first thing is to know the name Wix is giving to your uploaded font. Try adding a text with the font you want in the editor, preview the page and inspect the text to copy the style attribute with the font-family property. Mine looks like this:

Text with custom font

Change the “font-style: polaris” to the whole “font-family: wfont…” in your code, and see if that worked. Then try deleting the text you added before, to see if the font-family is still available, I guess it will be. If it’s not, you can keep the previously added text hidden for it to be available.

7

@holofractalestudio Yes, or you can console.log that text’s html and see this string in preview. Either works.

8

@skmedia Didn’t think of that, much faster!

9

Thank you both! One last question…the alignment on the html doesnt want to work:

$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
let currentItem = $w(“#dynamicDataset”).getCurrentItem();
let Titlevalue = currentItem.title;
$w(“#textTitle”).html = ‘’ + Titlevalue + ‘’;
$w(“#textDate”).html = ‘’ + “DATE” + ‘’;
$w(“#textLocation”).html = ‘’ + “LOCATION” + ‘’;
$w(“#textPurpose”).html = ‘’ + “PURPOSE” + ‘’;
});
})

The smaller red text should be center aligning but it isnt…thoughts?

10

The right css property is ‘text-align’, instead of ‘align’