Displaying a Google Font in the WYSIWYG editor

Barbara Seaton's Avatar

Barbara Seaton

02 Mar, 2015 06:27 PM

We purchased a font (Futura) through Typekit that we use for our public facing web site. To keep our "hits" down we do not pull it into the WYSIWYG editor.

However, we found a Google font that is similar (Didact Gothic) and want to pull that into the WYSIWYG editor so that our web editors get an idea of what their headings will look like while working with content.

We use the "global.css" file for styles within the WYSIWYG editor. If I try to import the Didact Gothic from Google into that css file, it does not show in the editor. Where and how do we pull this font in? (Note: This font is not available through font squirrel where we can get the actual files.)

This is what I tried to use:

          @import url('[system-asset]http://fonts.googleapis.com/css?family=Didact+Gothic[/system-asset]');

After saving the space between the ' ' signs shows empty rather than the "/rendered...."

Or could it be that the security of the web browser is preventing it from displaying? We do notice that when viewing a page from within Cascade (before you go into edit), we don't see the Futura font until we disable the protection on the page by clicking the little shield at the beginning or ending of the URL in the browser.

Thanks!

Barbara

  1. 1 Posted by Ryan Griffith on 02 Mar, 2015 06:50 PM

    Ryan Griffith's Avatar

    Hi Barbara,

    I believe you will have a few issues with the @import:

    • The [system-asset] pseudo tag should be used for internal assets, not external links
    • As you metnioned, the http:// protocol will cause security issues if you are running Cascade Server behind SSL (ie https).

    When you have a moment, try adjusting your font import to the following and let me know how it works out:

    @import url('//fonts.googleapis.com/css?family=Didact+Gothic');
    

    The // syntax is scheme-relative, meaning Google will serve the file over either http:// or https:// depending on the protocol of the page performing the import.

    Please let me know if you have any questions.

    Thanks!

  2. 2 Posted by Barbara Seaton on 02 Mar, 2015 07:09 PM

    Barbara Seaton's Avatar

    I had previously tried the format you show above and it didn't work. But this time I moved it up as the very first line in the file, and it appears to be working.

    Thank you!

  3. 3 Posted by Ryan Griffith on 02 Mar, 2015 07:48 PM

    Ryan Griffith's Avatar

    Thank you for following up, Barbara. I am glad to hear you were able to resolve the issue. Sounds like perhaps another style may have been overwriting the import.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  4. Ryan Griffith closed this discussion on 02 Mar, 2015 07:48 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac