File Structure:
- -- fonts
- -- css
- ---- fonts.css
For this tutorial we will be downloading fonts from Google Fonts.
To get started:
- Follow the link to Google Fonts and download a font and place the unzipped font into the fonts folder.
- Create a folder and name it css.
- Open the folder and inside create a file and name it fonts.css.
- Open the fonts.css file and add copy/paste the following into it.
- Change the name of the font AbrilFatface to the font you are adding.
@font-face {
font-family: AbrilFatface;
src: local(AbrilFatface), url(../fonts/AbrilFatface.ttf) format('opentype');
}
.abril {
font-family: AbrilFatface;
}
Be sure to add the following into the top of your style sheet.
@import url('fonts.css');
Open the file where you have the TinyMCE scripts and add the following.
font_css: '../css/fonts.css',
To access the added fonts in the menu go to Format/Formats.
I have added the fonts that are in the editor below for download (3.5Mb).