From this option you can maintain the Font types used in designing your site, add new Font types, or edit or delete the existing types.
Upon accessing we get this dialog:
We have three Font types that we may add as a new Font, by using the "New" button:
Aspects to consider in using Web Fonts
We must provide font files in the case of web fonts. Formats supported are: WOFF, EOT, TTF, EOT
It is not necessary to upload all formats. However, we will need one or another depending on the browser and the version.
Formats supported by browser:
-
Internet Explorer: EOT (IE6+)
-
Firefox: WOFF (3.6+) y TTF (3.5+)
-
Chrome: WOFF (6.0+) y TTF (all versions)
-
Safari: WOFF(5.1+), TTF (3.1+)
-
Safari (iphone / ipad): SVG (all versions)
-
Opera: WOFF (11.10+), TTF, SVG (10.0+)
-
Opera Mobile: TTF, SVG (9.7+)
-
Opera Mini: does not support WebFonts
With WOFF and EOT we can cover any current PC browser. For mobile devices we need to add TTF and SVG.
Regarding use, the code generated to include a webfont in the page is saved in a cache per session. In backend it is administered automatically, and if a Font is added/updated there is an expiry and regeneration at the same time. For a change to be taken in frontend, we must close and open the browser to generate a new session.
For the case of a font in SVG format, we must make sure that the name entered in the "Name" field is the same that appears inside the SVG file.
Configurations on web server
IIS7 has no registered MIME types for WOFF and SVG extensions, so they must be entered for WebFonts to function in these formats:
-
.woff / application/font-woff
-
.svg / image/svg+xml
Firefox does not allow view of fonts loaded from a domain other than the current one. Since the frontend URLs are used to load fonts, then they are cannot be viewed (preview) in backend. To solve this we must enter a Header in the IIS over the "media" virtual directory.
From the IIS administration tool and positioned on the "media" virtual directory, go to "HTTP Response Header" -> Add, Name: "Access-Control-Allow-Origin", Value: "*" (without the quotation marks).
We will not have to do this when working in backend with another browser.
See also
How to can I apply my own fonts in my site?