adding a font

tamlyn young's Avatar

tamlyn young

12 Feb, 2015 04:00 PM

hello ,

I would like to use a different font to the selection offered by tank for headings, sidebar and navigation. It is a google font. can I code it into my site? If so , how?

  1. Support Staff 1 Posted by Alan Alston on 13 Feb, 2015 07:02 AM

    Alan Alston's Avatar

    Hi Tamlyn

    Google Fonts offers a bunch of instructions as how to add their fonts and
    style headers, paragraphs etc accordingly. You'll need to learn a bit of
    CSS along the way but it's relatively simple.

  2. 2 Posted by tamlyn young on 14 Feb, 2015 11:11 AM

    tamlyn young's Avatar

    Hi Alan,

    I have read Google fonts instructions but don't understand where to
    implement them in the tank site. I entered this piece of code in the skin:
    <link rel="stylesheet" type="text/css" href="
    http://fonts.googleapis.com/css?family=Amatic+SC">
    but don't know where to go from there and how to regulate the font size. I
    know this question falls beyond the scope of tank support but I'd
    appreciate any tips you can offer as i am only just learning how to use the
    tank website design platform and would like to know how to customise it for
    my needs before i invest n upgrading my site.

    Thanks

  3. Support Staff 3 Posted by Alan Alston on 16 Feb, 2015 10:56 AM

    Alan Alston's Avatar

    Hi Tamlyn

    The following code (mostly from Google) adds the fonts to a site, and then
    the CSS after that specifies certain elements to use the font:

    <link href='http://fonts.googleapis.com/css?family=Amatic+SC'
    rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans'
    rel='stylesheet' type='text/css'>

    <style>
        #header h1 {font-family: 'Amatic SC', cursive;
    font-size:32px;line-height:36px;color:#333;}
        ul#global-nav li {font-family: 'Amatic SC', cursive; font-size:22px;}
        #canvas h2 { font-family: 'Amatic SC', cursive;
    font-size:36px;line-height:36px;}
        #canvas h3 { font-family: 'Amatic SC', cursive; font-size:24px;}
        #canvas p { font-family: 'Open Sans', sans; font-size:14px;}
    </style>

    I've demoed this in the Skin / Code field on your site. As you can see if
    you visit this page - http://tamlynyoung.withtank.com/ - the fonts display
    where they were 'told' to display.

    Please use this a base to experiment further with.

  4. 4 Posted by tamlyn young on 16 Feb, 2015 03:12 PM

    tamlyn young's Avatar

    Thank you Alan!! That's exactly what I was trying to achieve. I really
    appreciate your help.

  5. Alan Alston closed this discussion on 17 Feb, 2015 06:05 AM.

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

Recent Discussions

17 Nov, 2017 07:38 AM
10 Nov, 2017 11:50 AM
09 Nov, 2017 09:37 AM
08 Nov, 2017 08:58 AM
03 Nov, 2017 11:00 AM