DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.
Prev
Next

How do I add fonts to CKEditor?

Forums > Modules and Other Extensions
Sort:
You are not authorized to post a reply.





KHalladay

New Around Here



Posts:3
New Around Here




1/19/2021 8:51 AM

    Hello all, I hope this is the right place to post this question.

    We have a project that requires 2 custom fonts to be added drop down selector within CKEditor. One of these fonts, Rubik is available on https://fonts.google.com/ the other has to be installed and added from the local server.

    I have found how to do this using a simple vanilla build of CKEditor outside of DNN but the method does not work for the DNNConnect CKEditor provider build. I have read the blog posts by Steve Krantzman from last month and as I understand it the build used in DNN has been modified and uses a DB table for settings.

    We have attempted multiple methods of trying to add the fonts to the CKEditor config with no luck. Can anyone share the proper procedure to add both fonts hosted on Google as well as using locally installed fonts? We are running on a fresh install of DNN v9.7.

    Thanks in advance!






    AustinGuy

    New Around Here



    Posts:6
    New Around Here




    1/19/2021 1:32 PM
      You can change the default font in contents.css. You can also change them in the Font combo as explained https://ckeditor.com/docs....html#cfg-font_names

      If you want to add a custom font, it might be a bit harder, but it's doable. Check this: https://stackoverflow.com...ont-face-to-ckeditor





      KHalladay

      New Around Here



      Posts:3
      New Around Here




      1/20/2021 9:16 AM
        @AustinGuy We have come across & attempted both of these threads.
        The first link you provide allows us to add the font names only, if you select the font from the drop down it is not applied properly and displays it as the default font.

        The second link refers to editing the config.js file which changes do not appear to have any effect on the DNN CKEditor Provider version. We believe this is due to it is storing config settings in the DB table instead.

        We have tested using the file located here: C:\DOMAINNAME\httpdocs\Providers\HtmlEditorProviders\DNNConnect.CKE\js\ckeditor\4.5.3, is that the correct location? To verify we also tried editing the config.js to simply set the background color of the editor which had no effect. Setting the the background color via the config settings in the HTML Editor Manager saved the setting in the DB table only, NOT in the config.js file.

        Hoping someone has done this 1st hand and can provide details.

        Thanks





        Timo Breumelhof (40F)

        Veteran Member



        Posts:1094
        Veteran Member




        1/21/2021 3:42 AM
          Posted By KHalladay on 20 Jan 2021 10:16 AM
          @AustinGuy We have come across & attempted both of these threads.
          The first link you provide allows us to add the font names only, if you select the font from the drop down it is not applied properly and displays it as the default font.
           

          Adding the font name to the Editor is not enough. For a custom font to show on the page, you also need to load the source for that font.
          This means that you will have to add the link to the google fonts resource to you theme or the browser will never be able to load the font and will fallbck to the default font. If you already did that check what kind of HTML the editor is creating when you apply a custom font as there might be a font naming mismatch between the css and html.

           

           

          40FINGERS Web Solutions · Style Helper · DDR Menu Demo Skins · SEO Redirect





          KHalladay

          New Around Here



          Posts:3
          New Around Here




          1/21/2021 2:19 PM

            Yes this method does display the font properly on the page itself but not within the editor,

            That will be confusing for the end users. Where do I add the Google fonts info so that it applies within the editor?

            How would it be specified if the font is local?

            Thanks

            You are not authorized to post a reply.

            These Forums are dedicated to the discussion of DNN Platform.

            For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

            1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy. 
            2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
            3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
            4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
            5. No Flaming or Trolling.
            6. No Profanity, Racism, or Prejudice.
            7. Site Moderators have the final word on approving / removing a thread or post or comment.
            8. English language posting only, please.

            Would you like to help us?

            Awesome! Simply post in the forums using the link below and we'll get you started.

            Get Involved