Google provides an easy way to include hundreds of high quality web fonts to web pages. These fonts work in all major browsers and are served by Google CDN for lightning fast delivery. These fonts can also be used with Highcharts to further polish the appearance of our charts.
Note
This section assumes that you know the basics of using Google Web Fonts. If you are not familiar with them, visit https://developers.google.com/fonts/docs/getting_started.
In the following example, we will take code from the speedometer example from Chapter 6, Other Chart Types, to further style it with Google Fonts.
We will use the Merriweather family from Google Fonts and link to its style sheet from our web page inside the <head> tag:
<link href='http://fonts.googleapis.com/css?family=Merriweather:400italic,700italic' rel='stylesheet' type='text/css'>
Having included the style sheet, we can actually use the font family in our code for the labels in yAxis:
yAxis: [{
...
labels: {
style: {
fontFamily: 'Merriweather, sans-serif',
fontWeight: 400,
fontStyle: 'italic',
fontSize: '14px',
color: '#ffffff'
}
}
}, {
...
labels: {
style: {
fontFamily: 'Merriweather, sans-serif',
fontWeight: 700,
fontStyle: 'italic',
fontSize: '21px',
color: '#ffffff'
},
...
}
}]For the outer axis, we used a font size of 21px with font weight of 700. For the inner axis, we lowered the font size to 14px and used font weight of 400 to compensate for the smaller font size.
The following is the modified speedometer:
In the next section, we will continue with the same example to include jQuery UI easing in chart animations.