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


      • 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.

      • Website Accessibility

        I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for

      • 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/

        • Recent Topics

        • Top Menu Disappeared from Blog Page

          Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

        • Subforms and automation

          If a user updates a field how do we create an automation etc. We have a field for returned parts and i want to get an email when that field is ticked. How please as Zoho tells me no automation on subforms. The Reason- Why having waited for ever for FSM

        • My Zoho mail has been blocked for suspicious activity. cannot unblock it! need urgent help!

          Hi, I was accessing my email on an airplane which for some reason resulted in my mail being blocked. I have managed to unblock my incoming however outgoing is still blocked. I have contacted all your support emails but it still says contact support when I try to unblock outgoing emails. Its now been over 8 days with the same issue which is really serious as I'm not able to send several business emails during this period. I have followed all your steps to unblock this and contacted your support 5

        • Copy Widget to another Dashboard

          I can see the option to clone a widget to the same dashboard but is it possible to copy it to another dashboard?

        • booking link that expires

          I have a suggestion that is  crucial. When i send booking URL to clients they keep the link and they book appointment whenever they want multiple times. You should give us the Booking URL feature. We should be able to send it and the user can use it only

        • Error while importing products Purchase Price: Value in the field does not match with the data type supported by us.

          I am trying to import items into zoho inventory using an excel spreadsheet. I keep getting this error Purchase Price: Value in the field does not match with the data type supported by us. no matter how i format the cells this comes up and will not import

        • Quotes Module - import data

          Hello Zoho, is it possible to import Quotes records? I was trying and i have no results. Raport shows no data imported. Could you help me please how to do it?

        • Year-End Wrap: Disconnect now; Reconnect later with Offline Mode

          🎄Happy Holidays🎄 Let's say you are travelling home to spend the holiday season with your loved ones. Before you even board the train, you check your phone only to find your inbox rapidly filling with urgent emails that need your attention. There’s no

        • Exploring SalesIQ's Top Features of 2024: An Insider's Look 🔍

          As we wrap up another year at Zoho SalesIQ, it's time to reflect on how far we've come. This year has been incredible for us in our journey to build a more powerful, flexible, and customer-centric engagement platform. We've introduced several features

        • Resource booking functionality questions

          I'm exploring the resource booking functionality in Zoho Bookings for my organisation's needs. I have a few questions about the available Zoho Bookings functionalities. Is it possible to force all users to sign up for an account before they book a resource?

        • How to create a Field with answers as Yes, No> Further if no is selected a new field to be visible to give details

          Dear All, I am creating a feedback form in HR Letter. The question is were you satisfied with the work allotted. Expected answer to this is Yes, No. Further if the response is no, then a field to be give to fill more details as to why no was selected.

        • Modify the way a phone number is shown in footer on ZOHO Booking Page

          The default display of the phone number field in the footer is not customer friendly - See image below. We would like it to use the accepted standards of phone number display: +61 (0)2 88545440, or allow us to choose. At the moment ZOHO Booking sets how

        • Zoho Bookings Multilingual ?

          Hello, Not sure if there is a way to do it currently, but it would be very helpful if Zoho bookings allowed multilingual translations so we could have our booking pages and notifications setup in multiple languages. Thanks,

        • Allow customers to choose meeting venue and meeting duration on booking page

          My business primarily involves one-to-one meetings with my clients. Given the hybrid-work world we now find ourselves in, these meetings can take several forms (which I think of as the meeting "venue"): In-person Zoom Phone call I currently handle these

        • Problem viewing document imported from google drive.

          Hello, When I add a document via my google drive, it is impossible to preview it. I get the error “Files without extensions cannot be previewed. Download to view this file”. Could you please help me? Also, and this is more of a question: is there a way

        • Two way sync Zoho Mail and Bookings

          Hi, I know it’s possible to view Bookings appointments in Zoho Mail, but is there a way to see my Zoho Mail meetings in the Bookings calendar?

        • Modifying iframe data of Zoho booking iframe

          Hello, I have integrated a Zoho Bookings embedded iframe into my website. Currently, I am pre-filling the booking form with default values as part of our process flow. However, I want to ensure that if an input field is already populated with a default

        • Sending my emails to Spam Folder

          I am loosing my business because of this issue, many of my customers are receiving their email in the spam sometimes no one checks them

        • Why can't I sync my Zoho Mail tasks and notes with my mobile device, and is there a way to fix this issue?

          I'm having trouble syncing my Zoho Mail tasks and notes with my mobile device. Despite following the usual steps, the tasks and notes don't appear on my phone. Is there a way to fix this issue? Regards, Adamjes, Tekskills India Pvt Limited, India.

        • attributed automatically database section

          Hello everyone and happy holidays... here in zoho CRM, I created 3 bases: - Properties (House, apartment ...) - Transactions (Notaries, ...) - Real estate ads I want when the address is identical on these three bases, that in "Properties" the transactions

        • Re: constant rejected email form and to my account

          Hi, have had several rejection when I sent an email to Zoho account as well as other people have sent emails to my as your health Centre they have account and all aspects have been ejected. i wonder why the email are rejecting to and from. If you see

        • How do I redeem credits?

          How do I redeem credits that are shown in billing section?

        • Introducing 'Queries' In Zoho CRM

          Hello everyone! We are here with an exciting feature - Queries in Zoho CRM! A little context before we dive right into the feature specifics :) In today’s fast-paced business environment, immediate access to relevant data is essential for informed decision-making.

        • Will zoho thrive be integrated with Zoho Books?

          title

        • Cannot add IMAP account to "new" Outlook

          Hi, I am attempting to add an IMAP account to my copy of the "new" Outlook on my desktop computer. I have tried using the default password when MFA was disabled and an app password when MFA was enabled. But neither attempt worked. My Windows 11 OS number

        • How to Implement Time-Based Filters in Zoho Workflows?

          Hi everyone, I’m looking for a workaround to implement time-based filters in Zoho workflows. Specifically, I need a workflow to trigger only within certain hours (e.g., between 10:00 AM and 8:00 PM, Sunday to Friday). Currently, Zoho workflows execute

        • Update Zoho Flow on Sprint Work Item Status Change

          Hello, I've contacted Zoho One support but have been unable to help in a timely manner, so I'm asking the community. I want to start using sprints, but I'm having an issue. I need to post updates to Slack when a Work Item has a status change. My understanding

        • Issue with skip_workflow Not Preventing Edit Workflow Trigger

          Hi Team, I am trying to upload a file to a form in Zoho Creator. However, during the upload, an edit workflow is being triggered. I want to prevent this workflow from running, so I have used the skip_workflow parameter as mentioned in the API documentation:

        • Create Dashboard using data/tables from different workspaces

          Is it possible do create a Dashboard using different tables that are part of different Workspaces? 

        • Este domínio já está associado a esta conta

          quando digitei meu domínio recebi essa mensagem que meu domínio estava associado a uma conta que eu nem faço idéia de quem seja. Como que faço pra resolver isso?

        • Storage addon failed to upgrade

          Hi, I am trying to purchase addon storage, but i am getting upgrade failed error Sorry! We are unable to process your information. Please try again after some time. If the problem occurs again, please visit our Contact Us page to reach out to the appropriate

        • no puedo recibir correos

          Hola, en la cuenta de la empresa desde hace unos tres días dejamos de recibir correos y no hemos realizado ningun cambio de configuracion, requerimos asistencia urgente por favor

        • Default reminders on Emails

          I have seen that it is possible to set, for each email, a reminder when the email remains unresponded for some time. This is very useful, so useful that I would like to set it for all my emails, by default. Because an unanswered email usually requires

        • NO PUEDO RECIBIR CORREOS EN MI CUENTA ZOHO MAIL

          LO QUE SI PUEDO HACER ES ENVIAR CORREOS PERO NO PUEDO RECIBIR CORREOS. Y LA CONFIGUIRACION DE MI DNS YA ESTA CORRECTA Y APUNTAN A ZOHO PERO AUN ASI NO PUEDO RECIBIR  NECESITO AYUDA URGENTE YA QUE EN MEXICO NO HAY FORMA DE COMUNICARNOS VIA TELEFONIA CON

        • Send email is not authenticated

          Hi, I’m getting an error in Gmail, when receiving an email from my account in zoho, my email is already authenticated in my domain, and I don't know why I keep receiving this message... also testing in outlook, the message goes directly to "junk".

        • Using Queries with dynamic parameters in Kiosk Studio

          Hi, I'm pretty new when it comes to developing within Zoho (I'm really a .NET developer), as it was just added to my responsibilities. For a new feature in the CRM, I'm trying to develop a Kiosk function to show a list of records (retrieved by the new

        • Workflow Based on Manual Journal

          Manual journal entries are one of the few areas that cannot kick off a workflow automation in Zoho Books currently. I would propose considering adding that. My use case is that the payroll provider I use (a flavor of SurePayroll) has a Zoho Books automation

        • How do I hide all leads from Standard users in my CRM ZOHO

          I want to configure my crm zoho in such a way that standard users will only see leads owned or assigned to them. How do I go about doing this? I have tried all i could, but nothing...can anyone help me?

        • Zoho sheets to crm and mapping

          i want to know more about mapping the contacts that i upload from the spreadsheet also couldnt able to understand flow

        • Condition-based data sharing rules are now available in CRM

          Dear All,   We are excited to introduce a much awaited feature: condition-based data sharing rules. We'd love to explain more about this enhancement.   Specify record conditions in data sharing rules Data sharing rules enable you to share all the CRM

        • Next Page