1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Can anyone tell me how to change JUST the title's font in this template?

Discussion in 'Web Design' started by Apposl, Feb 4, 2015.

  1. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    97
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    The TF dev said: You need to create font folder, place your fonts in it and call them from head of index.html. Then update layout.css to use them instead of default ones(roboto).

    The font I want to use I have uploaded to the font folder which this template uses and is called magic.tff.

    But I don't know how to do what he says, and only for the 'title/logo' headline ('Tera' in this template).

    Any guidance would be so appreciated.

    This is layout.css:
    Code:
    /******* Overall Settings **********/ html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family:'Roboto';
        color: #fff;
        text-rendering: optimizeLegibility;
        font-smoothing: antialiased;
        -webkit-font-smoothing: antialiased;
        background: #3b973f;
    }
    h1, h2, h3, h4, h5, h6 {
    }
    h1 {
    }
    h2 {
    }
    h3 {
    }
    h4 {
    }
    h5 {
    }
    h6 {
    }
    a {
        text-decoration: none;
    }
    p {
    }
    span {
    }
    strong, b {
        font-weight: 700;
    }
    i, em {
        font-style: italic;
    }
    textarea:focus, input:focus {
        outline: 0;
    }
    /***********************************/
    
    
    /*********** GENERAL **************/
    .container {
        height: 100%;
        width: 100%;
    }
    
    
    .wrapper {
        position: fixed;
        text-align: center;
        top: 50%;
        left: 50%;
        width: 1080px;
        min-width: 240px;
        height: auto;
        z-index: 2000;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    
    
    }
    
    
    /*********** LOGO TEXT **************/
    .logo {
        text-align: center;
        font-size: 62px;
        font-weight: 700;
        letter-spacing: 0.14em;
    
    
    }
    
    
    .logo:before {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 100%;
        top: 40px;
        left: -850px;
    }
    
    
    .logo:after {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 100%;
        top: 40px;
        right: -850px;
    }
    
    
    .logo.bar:after {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 1000%;
        top: 40px;
        right: -650px;
    }
    
    
    /*********** SUBHEADER **************/
    And this is from index.html:

    Code:
         <!-- ============================================= MAIN ================================================== -->            <!-- header -->
                <div class="header">
    
    
                <!-- logo text -->
                    <div class="logo">
                        <span>TERA</span>
                    </div>
                    <!-- .logo text -->
    
    
                    <!-- subtext -->
                    <div class="subtext">
                        <h1>We are under construction
                            <br />we will come in</h1>
                    </div>
                    <!-- .subtext -->
    
    
                </div>
                <!-- .header -->
    
    
                <!-- countdown clock -->
                <div class="countdown"></div>
                <!-- countdown clock -->
    
    
                <!-- info icons -->
                <div class="info">
                    <span><i class="tipsy glyphicon glyphicon-info-sign md-trigger" data-modal="modal-1" title="about"></i>
                    </span>
                    <span><i class="tipsy glyphicon glyphicon-check md-trigger" data-modal="modal-2" title="subscribe"></i>
                    </span>
                    <span><i class="tipsy glyphicon glyphicon-edit md-trigger" data-modal="modal-3" title="contact"></i>
                    </span>
                    <span><i class="tipsy glyphicon glyphicon-plus md-trigger" data-modal="modal-4" title="social"></i>
                    </span>
    
    
                </div>
                <!-- .info icons -->
    
    
            </div>
            <!-- .wrapper -->
        </div>
    
    
        <!-- Javascript
    ================================================== -->
        <script 
     
  2. FBGuru

    FBGuru Senior Member

    Joined:
    Sep 22, 2013
    Messages:
    928
    Likes Received:
    1,172
    Location:
    Personality Type : ESTP
    Add this code in the layout.css

    Code:
    @font-face {
        font-family: magic;
        src: local(magic), url('fonts/magic.ttf') format('opentype');
    }
    
    so it looks like this

    Code:
    .....
        -webkit-font-smoothing: antialiased;
        background: #3b973f;
    }
    
    
    [B]@font-face {[/B]
    [B]    font-family: magic;[/B]
    [B]    src: local(magic), url('fonts/magic.ttf') format('opentype');[/B]
    [B]}[/B]
    
    
    h1, h2, h3, h4, h5, h6 {
    }
    h1 {
    }
    
    .....
    
    Add this code for the .logo div.

    Code:
    font-family: 'magic';
    
    so it looks like this

    Code:
    .logo {
        text-align: center;
      [B]  font-family: 'magic';[/B]
        font-size: 62px;
        font-weight: 700;
        letter-spacing: 0.14em;
    }
    
    Replace "magic" with the font name and magic.ttf with the font's filename.

    Create a folder where you currently have all these files and rename the folder as fonts.

    [​IMG]

    Copy your font to that fonts folder.

    Also, I don't see the layout.css called from the index.html so add this code too in your index.html right under the <div class="header">.

    Code:
    <link rel="stylesheet" type="text/css" href="layout.css" />
    
    Open the index.html. The word "TERA" will have the magic font now.
     
    • Thanks Thanks x 4
  3. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    97
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Thanks so much for your in-depth response!! I seem to have completed a step wrong as it's still not displaying - I think probably it has to do with a specific step as I wasn't sure what you meant by "Replace "magic" with the font name and magic.ttf with the font's filename.

    Create a folder where you currently have all these files and rename the folder as fonts."

    The template I downloaded from ThemeForest and uploaded to my cpanel had a fonts folder already, and I placed the magic.tff file in there with the rest of the fonts. Wasn't sure exactly what was meant by changing the font name to the filename when it appears you already did that, with the 'magic' and 'magic.tff.' My fonts folder is right next to my index.html, just as you showed in your image. It has the template's original fonts, and my new magic.tff.

    Maybe I placed the call to layout.css in the wrong place in index.html? I included that whole source file if that helps. You've already done enough so thank you if you're done helping!! :) I basically copied exactly everything you did, except for not having to create a fonts folder or move my font into that folder, or change the font filename. (PS, if you do come back to help a little more, I'd like to Paypal you at least a few bucks, it's appreciated.)

    This is my updated layout.css:

    Code:
    /***********************************/
    
    /******* Overall Settings **********/
     html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family:'Roboto';
        color: #fff;
        text-rendering: optimizeLegibility;
        font-smoothing: antialiased;
        -webkit-font-smoothing: antialiased;
        background: #3b973f;
    }
    @font-face {
        font-family: magic;
        src: local(magic), url('fonts/magic.ttf') format('opentype');
    }
    h1, h2, h3, h4, h5, h6 {
    }
    h1 {
    }
    h2 {
    }
    h3 {
    }
    h4 {
    }
    h5 {
    }
    h6 {
    }
    a {
        text-decoration: none;
    }
    p {
    }
    span {
    }
    strong, b {
        font-weight: 700;
    }
    i, em {
        font-style: italic;
    }
    textarea:focus, input:focus {
        outline: 0;
    }
    /***********************************/
    
    
    /*********** GENERAL **************/
    .container {
        height: 100%;
        width: 100%;
    }
    
    
    .wrapper {
        position: fixed;
        text-align: center;
        top: 50%;
        left: 50%;
        width: 1080px;
        min-width: 240px;
        height: auto;
        z-index: 2000;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    
    
    }
    
    
    /*********** LOGO TEXT **************/
    .logo {
        text-align: center;
        font-family: 'magic';
        font-size: 62px;
        font-weight: 700;
        letter-spacing: 0.14em;
    
    
    }
    
    
    .logo:before {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 100%;
        top: 40px;
        left: -850px;
    }
    
    
    .logo:after {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 100%;
        top: 40px;
        right: -850px;
    }
    
    
    .logo.bar:after {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 1000%;
        top: 40px;
        right: -650px;
    }
    
    
    /*********** SUBHEADER **************/
    .subtext {
        margin: 32px 0px;
    }
    
    
    .subtext h1{
        text-align: center;
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        word-spacing: 1px;
    }
    
    
    /*********** INFO SOCIAL ICONS **************/
    .info:before {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 100%;
        bottom: 60px;
        left: -650px;
    }
    
    
    .info:after {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 100%;
        bottom: 60px;
        right: -650px;
    }
    
    
    .info.bar_bottom:after {
        content: '';
        position: absolute;
        border-top: 1px solid #fff;
        width: 1000%;
        bottom: 60px;
        right: -650px;
    }
    
    
    .info.bar_bottom span {
        visibility: hidden;
    }
    
    
    .info {
        margin: 40px 0;
        font-family: 'Glyphicons Halflings';
    }
    
    
    .info span {
        background: transparent;
        font-size: 28px;
        display: inline-block;
        padding: 8px 3px;
    }
    
    
    .info i {
        color: #fff;
        cursor: pointer;
        font-family: 'Glyphicons Halflings';
    }
    
    
    .info i:hover {
        opacity: 0.6;
        transition:all 0.3s;
    }
    
    
    .social {
        font-size: 33px;
        padding: 5px;
        color: #fff;
        line-height: 61px;
        transition: all 0.3s;
    }
    
    
    .social:hover {
        opacity: 0.6;
        transition: all 0.3s;
    }
    
    
    .social-last {
        margin-bottom: 34px;
    }
    
    
    .social-last a {
        text-shadow: -1px 1px 1px rgba(0, 0, 0, 1);
    }
    
    
    /*********** CONTACT FORM **************/
    form {
        margin:20px 0;
    }
    
    
    form input[type="text"] {
        margin:0 2px 19px 2px;
        border: 1px solid #fff;
        background: transparent;
        padding: 5px 10px;
        font-size: 17px;
        display: inline-block;
        width: 180px;
        color: #fff;
    }
    
    
    
    
    form input[type="submit"] {
        cursor:pointer;
        background: transparent;
        border: 1px solid #fff;
        color:#fff;
        padding: 5px 10px;
        font-family: 'Roboto' sans-serif;
        font-size: 17px;
        transition:all 0.3s;
        margin-top:20px;
    }
    
    
    form input[type="submit"]:hover {
        background: #fff;
        transition:all 0.3s;
        color: #000;
    }
    
    
    ::-webkit-input-placeholder { /* WebKit browsers */
        color:    #d2d2d2;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #d2d2d2;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    #d2d2d2;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    #d2d2d2;
    }
    form textarea {
        margin: 0 auto;
        display: block;
        border:1px solid #fff;
        background: transparent;
        color: #fff;
        width:400px;
        height:120px;
        padding: 5px;
        font-size: 17px;
        font-family: 'Roboto' sans-serif;
    }
    
    
    /*********** SUBSCRIBE FORM **************/
    .subscribe-form {
        margin-bottom: 41px;
        margin-top: -20px;
    }
    
    
    .subscribe-input {
        border: 1px solid #fff;
        background: transparent;
        padding: 5px 10px;
        font-family: 'Roboto' sans-serif;
        font-size: 17px;
        margin-top: -1px;
    }
    
    
    .subscribe-input[placeholder] {
        color: #fff;
    }
    
    
    .subscribe-submit {
        border: 1px solid #fff;
        padding: 5px 10px;
        font-family: 'Roboto' sans-serif;
        font-size: 17px;
        color: #fff;
        background: transparent;
        transition: all 0.3s;
        -webkit-moz-transition: all 0.3s;
        -moz-moz-transition: all 0.3s;
        -ms-moz-transition: all 0.3s;
        -o-moz-transition: all 0.3s;
        moz-transition: all 0.3s;
    }
    
    
    .subscribe-submit:hover {
        background: #fff;
        color: #000;
        transition: all 0.3s;
        -webkit-moz-transition: all 0.3s;
        -moz-moz-transition: all 0.3s;
        -ms-moz-transition: all 0.3s;
        -o-moz-transition: all 0.3s;
        moz-transition: all 0.3s;
        cursor: pointer;
    }
    
    
    .tooltipsy
    {
        padding: 5px;
        max-width: 200px;
        color: #fff;
        background-color: #000;
        border-radius: 10px;
        margin-bottom: 5px;
    }
    And this my index.html:

    Code:
    <!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!-->
    <html lang="en">
    <!--<![endif]-->
    
    
    <head>
    
    
        <!-- Meta Tags
    ================================================== -->
        <meta charset="utf-8">
        <meta name="description" content="Tera is creative fully responsive HTML/CSS Cooming Soon page">
        <meta name="keywords" content="responsive, creative, html/css, special, page, coming soon, retina ready" />
        <meta name="author" content="Bane Stojanovic - @banes - reviserr.com">
    
    
        <!-- Site Title
    ================================================== -->
        <title>Tera - Coming Soon Page</title>
    
    
        <!-- Mobile Specific Metas
    ================================================== -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    
        <!-- CSS
    ================================================== -->
        <link rel="stylesheet" href="css/style.css">
    
    
        <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    
        <!-- Favicons
    ================================================== -->
        <link rel="shortcut icon" href="http://www.blackhatworld.com/blackhat-seo/images/favicon/favicon.png">
    
    
        <!-- Google Analytics
    ================================================== -->
        <script>
        var _gaq = [
            ['_setAccount', 'UA-XXXXX-X'],
            ['_trackPageview']
        ];
        (function(d, t) {
            var g = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
            g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g, s);
        }(document, 'script'));
        </script>
    </head>
    
    
    <body>
    
    
        <!-- ============================================= CONTAINER ================================================== -->
        <div class="container">
            <!-- wrapper -->
            <div class="wrapper">
                <!-- ============================================= POPUP ================================================== -->
                <!-- about us -->
                <div class="md-modal md-effect-12" id="modal-1">
                    <div class="md-content">
                        <h3>About Us</h3>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, rerum, qui, corporis, animi aliquid ipsa doloribus ea unde ratione assumenda eius eaque distinctio quo incidunt quisquam. Natus ipsam recusandae at.</p>
                            <p class="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, rerum, qui, corporis, animi aliquid ipsa doloribus ea unde ratione assumenda eius eaque distinctio quo incidunt quisquam. Natus ipsam recusandae at.</p>
                            <br />
    
    
                            <span class="md-close">CLOSE WINDOW</span>
                        </div>
                    </div>
                </div>
                <!-- .about us -->
    
    
                <!-- subscribe -->
                <div class="md-modal md-effect-12" id="modal-2">
                    <div class="md-content">
                        <h3>Sign Up</h3>
                        <div>
                            <p>Take a moment and subscribe to our newsletter!
                                <p>
                                    <form action="index.html" method="post" class="subscribe-form">
                                        <input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus>
                                        <button type="submit" class="subscribe-submit">Subscribe</button>
                                    </form>
                                    <span class="md-close">CLOSE WINDOW</span>
                        </div>
                    </div>
                </div>
                <!-- .subscribe -->
    
    
                <!-- contact us -->
                <div class="md-modal md-effect-12" id="modal-3">
                    <div class="md-content">
                        <h3>Contact</h3>
                        <div>
                            <form action="#" method="POST">
                                <input name="name" type="text" placeholder="Your name" />
                                <input name="email" type="text" placeholder="Your email" />
                                <textarea name="message" rows="7" cols="30" placeholder="Your message"></textarea>
                                <input type="submit" value="Send Email" />
                            </form>
                            <br />
                            <span class="md-close">CLOSE WINDOW</span>
                        </div>
                    </div>
                </div>
                <!-- .contact us -->
    
    
                <!-- social icons -->
                <div class="md-modal md-effect-12" id="modal-4">
                    <div class="md-content">
                        <h3>Social</h3>
                        <div>
                            <div class="social-last">
                                <p>You can reach us through:</p>
                                <a href="#"><i class="tipsy fi-social-facebook social" title="facebook"></i></a>
                                <a href="#"><i class="tipsy fi-social-twitter social" title="twitter"></i></a>
                                <a href="#"><i class="tipsy fi-social-bing social" title="bing"></i></a>
                                <a href="#"><i class="tipsy fi-social-flickr social" title="flickr"></i></a>
                                <a href="#"><i class="tipsy fi-social-google-plus social" title="google+"></i></a>
                                <a href="#"><i class="tipsy fi-social-linkedin social" title="linkedin"></i></a>
                                <a href="#"><i class="tipsy fi-social-pinterest social" title="pinterest"></i></a>
                                <a href="#"><i class="tipsy fi-social-dribbble social" title="dribbble"></i></a>
                                <br />
                            </div>
                            <span class="md-close">CLOSE WINDOW</span>
                        </div>
                    </div>
                </div>
                <!-- .social icons -->
    
    
                <!-- overlay -->
                <div class="md-overlay"></div>
                <!-- .overlay -->
    
    
                <!-- ============================================= MAIN ================================================== -->
                <!-- header -->
                <div class="header">  
    <link rel="stylesheet" type="text/css" href="layout.css" />
    
    
    
    
                <!-- logo text -->
                    <div class="logo">
                        <span>TERA</span>
                    </div>
                    <!-- .logo text -->
    
    
                    <!-- subtext -->
                    <div class="subtext">
                        <h1>We are under construction
                            <br />we will come in</h1>
                    </div>
                    <!-- .subtext -->
    
    
                </div>
                <!-- .header -->
    
    
                <!-- countdown clock -->
                <div class="countdown"></div>
                <!-- countdown clock -->
    
    
                <!-- info icons -->
                <div class="info">
                    <span><i class="tipsy glyphicon glyphicon-info-sign md-trigger" data-modal="modal-1" title="about"></i>
                    </span>
                    <span><i class="tipsy glyphicon glyphicon-check md-trigger" data-modal="modal-2" title="subscribe"></i>
                    </span>
                    <span><i class="tipsy glyphicon glyphicon-edit md-trigger" data-modal="modal-3" title="contact"></i>
                    </span>
                    <span><i class="tipsy glyphicon glyphicon-plus md-trigger" data-modal="modal-4" title="social"></i>
                    </span>
    
    
                </div>
                <!-- .info icons -->
    
    
            </div>
            <!-- .wrapper -->
        </div>
    
    
        <!-- Javascript
    ================================================== -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery.vegas.js" type="text/javascript"></script>
        <script src="js/jquery.tubular.1.0.js" type="text/javascript"></script>
        <script src="js/dscountdown.js" type="text/javascript"></script>
        <script src="js/modalEffects.js" type="text/javascript"></script>
        <script src="js/classie.js" type="text/javascript"></script>
        <script src="js/tooltipsy.min.js" type="text/javascript"></script>
        <script src="js/pace.js" type="text/javascript"></script>
        <script src="js/custom.js" type="text/javascript"></script>
    
    
        <!-- End Document
    ================================================== -->
    </body>
    
    
    </html>
    
    
    
    cPanel File Manager v3 (2).jpg cPanel File Manager v3 (3).jpg
     
    Last edited: Feb 4, 2015
  4. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    97
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Think I figured it out thanks to you! Appreciate your time!