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)
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:
- /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 23, 2017 */
- @font-face {
- font-family: 'amatic_scbold';
- src: url('/files/fonts/amaticsc-bold-webfont.eot');
- src: url('/files/fonts/amaticsc-bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('/files/fonts/amaticsc-bold-webfont.woff2') format('woff2'),
- url('/files/fonts/amaticsc-bold-webfont.woff') format('woff'),
- url('/files/fonts/amaticsc-bold-webfont.ttf') format('truetype'),
- url('/files/fonts/amaticsc-bold-webfont.svg#amatic_scbold') format('svg');
- font-weight: normal;
- font-style: normal;
- }
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:
- h1 {
- font-family:$BodyH1FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$BodyH1FontSize[72px];
- color:$BodyH1TextColor[#413f35];
- }
- h2 {
- font-family:$BodyH2FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$BodyH2FontSize[60px];
- color:$BodyH2TextColor[#413f35];
- }
- h3 {
- font-family:$BodyH3FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$BodyH3FontSize[48px];
- color:$BodyH3TextColor[#413f35];
- }
- h4 {
- font-family:$BodyH4FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$BodyH4FontSize[36px];
- color:$BodyH4TextColor[#413f35];
- }
- h5 {
- font-family:$BodyH5FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$BodyH5FontSize[30px];
- color:$BodyH5TextColor[#413f35];
- }
- h6 {
- font-family:$BodyH6FontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$BodyH6FontSize[24px];
- color:$BodyH6TextColor[#413f35];
- }
Edit all the classes you wish, maybe also the Sitename class
- .themeSitename {
- font-family:$SiteNameFontFamily['amatic_scbold', 'Playfair Display', Georgia, serif];
- font-size:$SiteNameFontSize[72px];
- color:$SiteNameTextColor[#2b2928];
- font-weight: 700;
- }
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