To use custom font files for your site you need to follow the below process:
- Create a folder to store your font file in your child theme ( eg a folder 'font' is created in: http://yoursite.com/wp-content/themes/child-theme/font/). It's important to create a child theme and store the font file inside the child theme so that the font file is not overwritten when you update your theme.
- In the style.css of your child theme add the below code. Here we are including a font called Alex, you need to replace the font name and file name that you are using.
- You can now style the text in the style.css of your child theme using the CSS font-family rule.
@font-face {
font-family: Alex;
src: url(http://yoursite.com/wp-content/themes/child-teme/font/AlexBrush-Regular.ttf);
font-weight: normal;
}
#apply {
font-family: "Alex", Arial, sans-serif;
}