How to add a custom (google) web font to ZOHO Sites? For all browsers! HERE IS MY SOLUTION!

How to add a custom (google) web font to ZOHO Sites? For all browsers! HERE IS MY SOLUTION!

Many users want to add a custom font to ZOHO SITES.
Here is my solution (for all browsers):

1. Choose and download your (legal) web font to your local drive. For example pick one at google fonts (https://fonts.google.com/) - I´ve choosen the "AmaticSC-Bold.ttf" (truetype format .ttf)

2. Go to Fontsquirrel Webfont Generator (https://www.fontsquirrel.com/tools/webfont-generator) and upload all your fonts you wish to integrate in you site.

3. Choose "Expert mode" and activate all of the following Font Formats: TrueType, WOFF, WOFF2, EOT, Lite, and SVG. (Because all the different browsers just supports some of the formats, if you want that your font is shown in all browsers choose all the format types - here you can find a comparison list https://socialcompare.com/en/comparison/browser-fonts-support-comparison) 

4. Keep all the other settings and click the "download the kit" button.

5. Extract all the files and upload all of them to a folder called fonts which you have to create in files (Manage -> Sttings -> Files) the path will be /files/fonts

6. Open the stylesheet.css file (one of the downloaded files in the fontsquirrel kit) and copy the whole code, then go to Theme -> Custom CSS Editor and paste the code there. Then you have add the path (/files/fonts/) before the name of the font files, it should look like this:

  2. /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 23, 2017 */

  4. @font-face {
  5.     font-family: 'amatic_scbold';
  6.     src: url('/files/fonts/amaticsc-bold-webfont.eot');
  7.     src: url('/files/fonts/amaticsc-bold-webfont.eot?#iefix') format('embedded-opentype'),
  8.          url('/files/fonts/amaticsc-bold-webfont.woff2') format('woff2'),
  9.          url('/files/fonts/amaticsc-bold-webfont.woff') format('woff'),
  10.          url('/files/fonts/amaticsc-bold-webfont.ttf') format('truetype'),
  11.          url('/files/fonts/amaticsc-bold-webfont.svg#amatic_scbold') format('svg');
  12.     font-weight: normal;
  13.     font-style: normal;

  15. }​

Click Save and close!


!NOTE! All the custom added fonts will not appear in the ZOHO Sites Visual Editor font list, you have to add code at the CSS classes in HTML/CSS Editor in the CSS section.


7. Now open Templates - > HTML/CSS Editor and switch to CSS section. You have to add the font-family name from your prior edited Custom CSS file to the CSS classes you wish. !! IMPORTANT: Your new font name should be the first in the list!
It should look like this:

  2. h1 {
  3. font-family:$BodyH1FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  4. font-size:$BodyH1FontSize[72px];
  5. color:$BodyH1TextColor[#413f35];
  6. }
  7. h2 {
  8. font-family:$BodyH2FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  9. font-size:$BodyH2FontSize[60px];
  10. color:$BodyH2TextColor[#413f35];
  11. }
  12. h3 {
  13. font-family:$BodyH3FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  14. font-size:$BodyH3FontSize[48px];
  15. color:$BodyH3TextColor[#413f35];
  16. }
  17. h4 {
  18. font-family:$BodyH4FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  19. font-size:$BodyH4FontSize[36px];
  20. color:$BodyH4TextColor[#413f35];
  21. }
  22. h5 {
  23. font-family:$BodyH5FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  24. font-size:$BodyH5FontSize[30px];
  25. color:$BodyH5TextColor[#413f35];
  26. }
  27. h6 {
  28. font-family:$BodyH6FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  29. font-size:$BodyH6FontSize[24px];
  30. color:$BodyH6TextColor[#413f35];
  31. }
 Edit all the classes you wish, maybe also the Sitename class

  2. .themeSitename {
  3.  font-family:$SiteNameFontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
  4.  font-size:$SiteNameFontSize[72px];
  5.  color:$SiteNameTextColor[#2b2928];
  6.     font-weight: 700;
  7. }

Hit save and close!

DONE!
Puplish your site and check it in your different browsers!

If something went wrong you can check the demo.html page in the prior downloaded kit.
Or you may ask ZOHO Support or post your question in this forum.

Kind regards Matthias
      Bootcamp
      Community
      Pricing
      Webinars
      What's New
      Integrations
      Contact Support
      Contact Sales



          Zoho Survey Resources
            Features
            Survey Templates
            Integrations
            Community
            iOS Mobile Surveys
            Pricing
            Android Mobile Surveys
            Insurvey Blogs
            Insight Blogs
            Tips & Tricks





                          Setup Zoho Bigin in 30 Minitues
                          Latest Feature Updates

                            Zoho Desk Resources

                            • Desk Community Learning Series


                            • Digest


                            • Functions


                            • Meetups


                            • Kbase


                            • Resources


                            • Glossary


                            • Desk Marketplace


                            • MVP Corner


                            • Word of the Day




                                Zoho Marketing Automation
                                  Zoho SalesIQ Resources

                                        • Sticky Posts

                                        • Unveiling Zoho Sites 2.0 - A new dimension in website building

                                          Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.

                                        • Visual Editor Webinar

                                          Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements.  Register here: https://www.zoho.com/sites/webinars/

                                        • SEO for your Zoho Sites Website

                                          Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/

                                        • Zoho Sites Webinar | Integrations

                                          Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/

                                        • Social Media Webinar | Zoho Sites

                                          Join our FREE live webinar to learn how to integrate your social media channels with your Zoho Sites website. Our product expert will demonstrate how to use the built-in social media tools to connect with your visitors and increase your brand's online visibility. Register here: https://www.zoho.com/sites/webinars/


                                        Manage your brands on social media
                                        Access Zoho Social

                                          Zoho Pagesense Resources


                                              Zoho TeamInbox Resources

                                                Zoho DataPrep Resources



                                                  Zoho CRM Plus Resources

                                                    Zoho Books Resources


                                                      Zoho Subscriptions Resources

                                                        Zoho Projects Resources


                                                          Zoho Sprints Resources


                                                            Qntrl Resources


                                                              Zoho Creator Resources


                                                                Zoho WorkDrive Resources



                                                                  Zoho Campaigns Resources

                                                                    Zoho CRM Resources

                                                                    • CRM Community Learning Series

                                                                      CRM Community Learning Series


                                                                    • Tips

                                                                      Tips

                                                                    • Functions

                                                                      Functions

                                                                    • Meetups

                                                                      Meetups

                                                                    • Kbase

                                                                      Kbase

                                                                    • Resources

                                                                      Resources

                                                                    • Digest

                                                                      Digest

                                                                    • CRM Marketplace

                                                                      CRM Marketplace

                                                                    • MVP Corner

                                                                      MVP Corner

                                                                    





                                                                    




                                                                        Design. Discuss. Deliver.

                                                                        Create visually engaging stories with Zoho Show.

                                                                        Get Started Now