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)

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

NetSpace7
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?

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.