What can we do to make it easier to design with Wild Apricot?

Adobe Typekit and Google WebFonts

Hiyah,

I am trying to use Adobe Typekit or Google WebFonts in the design of my site.

Am having difficulty getting either to work.

I have tried two methods with Typekit, having inserted Typekit's two lines of code into the <head> section of each page by using the Meta-Tags>Raw Headers window.

1) - using CSS customisations to generate a custom class:

- then using that to surround some text:

<h1asd> Test text </h1asd>

This method has no effect

2) using span class on the page, to reference 'h1asd' defined in typekit as a

<span class="h1asd">Test text</span>

This method has no effect eitherGoogle Webfonts also requires a line of code in the <head> section which I've also done using Meta-Tags>Raw HeadersThen I've added this to the CSS customisation: h1asdg { font-family: ‘Raleway Dots’, Arial, serif; font-weight: 400; } And again tried wrapping the text in a <h1asdg> tag, but also with no effect.
What am i doing wrong?
Thanks

0 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Gareth FryGareth Fry shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    10 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Steve aka Picky Apricot (Wild Apricot Support)Steve aka Picky Apricot (Wild Apricot Support) commented  ·   ·  Flag as inappropriate

        We've added a new help page explaining how to add more font options, specifically Google fonts, to the content editor. It involves a number of steps and theme overrides. Here's the page: https://help.wildapricot.com/display/DOC/Fonts+used+in+ArtText .

        If you run into any issues with this page, please use the feedback form at the bottom to let us know.

        Thanks and good luck

      • JanJan commented  ·   ·  Flag as inappropriate

        I did nothing. I assumed something happened on your end.

        Not sure I understand your comments about the font code, our CSS, from google fonts is in the Raw Headers. We are using normal Oranienbaum and normal plug bold Open Sans.

        <link href='http://fonts.googleapis.com/css?family=Oranienbaum|Open+Sans:400,700'; rel='stylesheet' type='text/css'>

        Well...how strange it is working now if neither of us made any modifications. Thanks.

      • JanJan commented  ·   ·  Flag as inappropriate

        Evergny,

        Thanks for that suggestion. I use browers inspectos-very handy indeed. As you can see from this screen shot, the h1 tag looks correct in the CSS, but what appears on the screen is not Oranienbaum, it's Times. The logo is Oranienbaum. You can also view the font here: http://www.google.com/fonts/#UsePlace:use/Collection:Oranienbaum. I have assigned Times to h2 and you can see they look the same. If I assign Oranienbaum to the body tag, it looks fine and the font appears visually correct on the screen. Very confusing to me. Thanks for your help. I can send a link if that would help.

        Jan

      • JanJan commented  ·   ·  Flag as inappropriate

        I am having mixed results using Google WebFonts. We are using two different fonts. The body works fine. But, when I assign a fot-family to the h tags, it doesn't use the Google font, it uses the second font in the list. Anything special about the h fonts? or any suggests would be helpful. I want to use h tags for SEO reasons.

        Thanks Jan

      • Gareth FryGareth Fry commented  ·   ·  Flag as inappropriate

        I found out a successful solution to using Google Webfonts.

        I have been putting the:

        <link href='http://fonts.googleapis.com/css?family=Nunito:700|Roboto'; rel='stylesheet' type='text/css'>

        code into the header Meta-Tags of the relevant page (Web pages > Page Management > Meta-Tags > Header.

        And then in Settings > CSS customization I've put:

        h8 {font-family: 'Roboto', sans-serif;}

        Then on the relevant web page I've encased some text in <h8>, eg

        <h8> This is some text with a webfont </h8>

        This I was doing before. What I didn't clock is that Wild Apricot will not show you the webfont if you are in Admin view or editing the page. You have to go into Public view to see the effect. A small but critical detail!

      • DotCreativityDotCreativity commented  ·   ·  Flag as inappropriate

        Hello,

        When you add your CSS class, do not forget to prefix it with a period like this: .h1asd { font-family: ‘Raleway Dots’, Arial, serif; font-weight: 400; }

        The period is what allows it to be used as a class name like this: <span class="h1asd">Test text</span>

        If that doesn't work, try adding "!important" to the attributes, like this: .h1asd { font-family: ‘Raleway Dots’, Arial, serif!important; font-weight: 400!important; }

      Feedback and Knowledge Base

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7