In the context of SP Page Builder 5, I downloaded and stored the used Google fonts locally. How can I include these fonts in JCE Pro?
You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
Support is currently Offline
Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)
09:00 - 17:00 Europe/London (BST)
Please create a new Ticket and we will get back to you as soon as we can.
#115343 How to include localy stored Google fonts
Posted in ‘Editor’
This is a public ticket
Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.
Latest post by Ryan on Tuesday, 28 November 2023 12:25 GMT
Monday, 27 November 2023 10:23 GMT
NetSpace7
Tuesday, 28 November 2023 12:25 GMT
Ryan
You can add fonts to the Font Family list in the editor toolbar - https://www.joomlacontenteditor.net/support/tutorials/editor/adding-and-removing-fonts
I am unfamiliar with the process of adding fonts to SP PageBuilder amd assume they are loaded by SP PageBuilder dynamically.
For the fonts to be rendered correctly in the editor, you will need to create a stylesheet that includes @import rules for the fonts, eg:
/* Donegal One Font */
@font-face {
font-family: 'Donegal One';
src: url('fonts/DonegalOne-Regular.eot'); /* IE9 Compat Modes */
src: url('fonts/DonegalOne-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/DonegalOne-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/DonegalOne-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/DonegalOne-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/DonegalOne-Regular.svg#DonegalOne-Regular') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 400;
}
Assuming the font files are in a "fonts" folder in the same folder as the stylesheet.
Then and add this as an additional stylesheet for the editor to load:
1. In Editor Profiles -> Editor Parameters -> Typography, set Editor Styles to Add.
2. In the Custom CSS Files field, add the relative path to the new stylesheet. Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Please wait
Your post is being submitted…