Setting Custom font

[vamsi467]

Version

4.5.0

Steps to reproduce

1. Assign custom font to any fontStyles.

What is expected?

Need to add new font style

What is actually happening?

Accepting only predefined fonts

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[100pah]

Could your provide more info about this issue? For example, an option.

[ghost]

@Ovilia

textStyle Global font style. https://echarts.apache.org/en/option.html#textStyle

For example: textStyle.fontFamily = 'Avenir Next'

besides just 'serif' , 'monospace', ...

Any custom font we may want to include in the page, can Echarts expand to support it? Can we point ECharts to the font we include? Any of the sort besides just a set list of fonts. Not sure what more of an explanation can be given. The ability to use any custom font we want to use besides the defaults.

[cetonek]

@Ovilia why do you close this? I think its legitimate issue / feature request. It seems inconsistent if a website is using some fontFamily but using different one for charts.

[Ovilia]

Custom fonts are supported. You should load the fonts with CSS and set fontFamily to the name of those fonts.

@Ejstn The issue was closed because lack of activity (5 month).

[Ovilia]

I made a demo: https://codepen.io/Ovilia/pen/ExVreNE

[cetonek]

@Ovilia Wow, I see. That's great and thanks for the demo. My bad, it didnt occur to me because the documentation says only "Can also be 'serif', 'monospace', ..."

[Canees]

我做了一个演示：https : //codepen.io/Ovilia/pen/ExVreNE I tried VUE ,Font files are used in the configuration,But it still doesn't work,Mouse over the chart takes effect,What's the reason?

[TalentKou]

I put the property 'fontFamily: 'rubik-font'' inside option.title.textStyle.rich.b, then didn't work. Maybe the font is custom, not from system fonts

[WebGamer]

In the example fonts work, but in my project setting a new font does not

[TIGeMi]

Maybe not relevant to the main topic, but I want to know what is the default font family of ECharts. I get the default value of most fontFamily properties are 'sans-serif', but when I try to put fontFamily: 'sans-serif' into the option, the text is displayed differently with the default one Try example

[KnifeFed]

@TIGeMi For me, that demo looks identical whether fontFamily is commented out or not.

[AB-D]

Just commenting here. You can set a custom font in the textStyle attribute in the chart option. However, I find that it only applies when the renderer is set to "SVG"

Otherwise if using canvas it will only seem to apply if you mouseover the text.

[Beramos]

This issue is still relevant. @AB-D is right that there is no problem when using the "SVG"-rendered. For the canvas a hacky workaround (not my credit) can be found here:

https://codepen.io/plainheart/pen/JjGWeav

It appears that the problem is related to font loading, so the charts has to be redrawn after the fonts have been loaded.

document.fonts.ready.then(function () {
  console.log("fonts ready");
  // refresh the chart when custom fonts are ready
  chart.setOption({});
});