How do you code in a font-face?

Ask the community
,
1

I entered the name of the font for the font face, but it did not work any suggestions?

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query('EmployeeList') 
 // Filters
 .contains('title','employee)
 .find()
 .then((results) => {
 if (results.totalCount > 0) {
                     $w("#text1").html = '<span style="font-size: 40px; text-align: center; font-face Rosewood; color: RED">' + results.items[0].title + '</span>';
 }
 }
 )
 }
)
2

First upload the font to Wix Editor (click the text element > Edit > Font > Upload Fonts).
then use font-family: rosewood-std, sans-serif; in your html property (unless you wish to set it via the editor)

3

Thank you for the suggestion J. D.

I could not get that to work. I would prefer to use the font set in the editor along with the size and alignment. I only need to change the font color, but I say in the Velo Reference guide that you could only change the font color when calling for .html and not .text

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query('RepeaterTest')
 .find()
 .then((results) => {
 if (results.totalCount > 0) {
                     $w("#text1").html = '<span style="font-size: 40px; text-align: center; font-family: rosewood-std, sans-serif; color: RED">' + results.items[0].title + '</span>';
 }
 }
 )
 }
)
4

You can have static style or dynamic style.
For static style you can do everything via the editor:
click the text > Edit > set the color and font

For dynamic style use the code you posted (but only after you upload the font)

5

@jonatandor35 I want to use a wix font. Do I need to download the wix font and then re-upload it?

6

@turner50815 no. If the font is already there, just pick it up. No need to re-upload it.

7

@jonatandor35 I think I am missing a step.

This is the code:

import wixData from'wix-data';  
    $w.onReady(function(){     
            wixData.query('RepeaterTest').find().then((results)=>    {
            if(results.totalCount >0){
                    $w("#text1").html ='<span style="font-size: 40px; text-align: center; font-family: rosewood-std, sans-serif; color: RED">'+ results.items[0].title +'</span>';
                    }
                    }
                    )
                    }
                    )

This is what is shown:

1412×772 13.8 KB

8

@turner50815 and what’s the problem with that?

9

@jonatandor35 The issue is that the code is supposed to call for the Rosewood font which is below the red word and it is suppose to be aligned to the center.

1546×614 33.8 KB

10

@turner50815 maybe results.totalCount === 0 maybe there’s a collection permissions issue maybe something else. You should debug your code, see if there’s an error in the console, add console.log() to see the results etc…

11

@turner50815 You can use html component on screen and postMessage() & onMessage() functions as page code.

https://www.wix.com/velo/reference/$w/htmlcomponent/onmessage