Fonts — including macOS & Google fonts

Log in to Svija Admin at yourwebsite.com/a

Fonts in Svija Admin

When you use a new font in Adobe Illustrator, it will be added to the Fonts section of Svija Admin the first time the page is visited:

When it is first added, you will see that GOOGLE FONT is unchecked and WOFF FILENAME is empty.

For the font to start working, click on it and either:

  1. check the Google Font* box, or
  2. place a WOFF version of the font in sync/Svija/Fonts/WOFF Files and
  3. enter the filename in the WOFF filename field

NEVER CHANGE “SVG NAME”: The SVG name is the CSS reference inside the SVG file.

N.B.: for WOFF files, the Family and WeightStyle field values are irrelevant.

*Support for Adobe Cloud Fonts coming soon.

Google Fonts

Google fonts should work automatically, but it they don’t, there are two possible solutions:

1. Replace WeightStyle with a Number

It is sometimes necessary to replace the WeightStyle value with a number. Google often prefers numbers to weight names. Here are the most common equivalents:

  • 100 · Thin
  • 200 · Extra-Light
  • 300 · Light
  • 400 · Regular
  • 500 · Medium
  • 600 · Semi-Bold
  • 700 · Bold
  • 800 · Extra-Bold
  • 900 · Black

If you want the font to be italic, just add it before or after the weight, separated by a space: 600 italic

2. Try different Capitalization and Spacing

Some font names have unusual capitalization or spacing. If a font is not working, it may be because the family name is missing a space or has an extra space. For example:

  • try changing OpenSans to Open Sans
  • try changing Ko Ho to KoHo

Fonts on Your Mac

Note: for purchased fonts, you may be required to buy a web version separately.

Follow these steps to use macOS fonts with Svija:

  1. locate the original macOS font
  2. create a WOFF version of the font at convertio.co
  3. download the WOFF file to Svija/Fonts/WOFF Files
  4. enter the WOFF filename in Svija Admin

For this example, let’s use Bradley Hand Bold font in the home page. First, we find the original font file by right-clicking it in FontBook and selecting Show in Finder.

Creating a WOFF Version of the Font

Go to convertio.co to make a WOFF version of the font:

  • click Choose Files
  • under “to” select Font › WOFF, then click Convert
  • when the conversion is done, download the font into sync/Svija/Fonts/WOFF Files/

Keep a copy of the TTF or OTF version in sync/Svija/Fonts — it’s helpful for your collaborators, and automatic font conversion is coming soon 😉

Enter the WOFF Filename in Svija Admin

To finish the process we just need to copy the name of the WOFF file to Svija Admin :

  • in the Finder, copy the name of the converted font (BradleyHandITCTT-Bold.woff)
  • in the Svija Admin font list, click on BradleyHandITCTT-Bold to open the settings page
  • paste it the WOFF name, replacing SOURCE NEEDED:

After you’ve clicked SAVE, the page should work.

Pages in this section:

Leave a Reply

Your email address will not be published. Required fields are marked *