How can I use custom fonts?
This is an article for advanced users or web developers - you need to know how HTML and CSS works to properly use this advice.
If you want to use your own font, you need to upload font files somewhere to the internet (or you can just link to your existing font files on your website for example) and then you can use your own fonts by using the custom CSS feature.
You can define a new font like this and then use this new font-family in your custom CSS code in your theme to override the default fonts:
@font-face{
font-family: 'my_custom_font';
src:url('https://linktoyourfont/font.eot?#iefix') format('embedded-opentype'),
url('https://linktoyourfont/font.woff') format('woff'),
url('https://linktoyourfont/font.ttf') format('truetype'),
url('https://linktoyourfont/font.svg#open_sanslight') format('svg');
font-weight: 400;
font-style: normal;
}
/* override headings for example */
h1, h2, h3{
font-family: 'my_custom_font' !important;
}
/* override headings for example */
h1, h2, h3{
font-family: 'my_custom_font' !important;
}
Also please make sure the website hosting font files has the correct CORS configuration!