Custom CSS Font installation

Question

I'm trying to install a custom font onto my site. The font is Lobster . The specific page where I am trying to install the font is here . I have a webkit for the font already hosted on my site.

Here is the relevant part of main style CSS:

/***********************************************************************************

Universal Typography

************************************************************************************/

a {
    text-decoration: none;
}

@font-face {
    font-family: myFirstFont;
    src: url('lobster_1.3-webfont.eot');
    src: url('lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.3-webfont.woff2') format('woff2'),
         url('lobster_1.3-webfont.woff') format('woff'),
         url('lobster_1.3-webfont.ttf') format('truetype'),
         url('lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/***********************************************************************************

Sections

************************************************************************************/

section {
    padding: 0 39px;
}

/***********************************************************************************

Gallery

************************************************************************************/

.gallery {
    width: 100%;
    float: left;
    padding: 99px 0 0;
    position: relative;
}

.gallery:last-of-type {
    padding-bottom: 39px;
}

/***********************************************************************************

Gallery Typography

************************************************************************************/

.gallery h2 {

    font-family:myFirstFont;
    font-size: 20px;
    line-height: 15px;
    font-weight: 100;
    color: #444444;
    position: absolute;
    top: 65px;
    left: 0;
}

.gallery h2 span {
    font-weight: 300;
}

Here is the HTML code for the page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <!-- Title: Change the title and description to suit your needs. -->
        <title>Logos</title>
        <!-- Description: Change the title and description to suit your needs. -->
        <meta name="description" content="Logos by Orange Juice Diaries.">

        <!-- Viewport Meta: Just taming mobile devices like iPads and iPhones. -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Google Fonts: The default font for this template. -->
        <link href='http://www.orangejuicediaries.com/webfontkit-20150726-133737/stylesheet.css' rel='stylesheet' type='text/css'>

        <!-- Styles: The primary styles for this template. -->
        <link rel="stylesheet" href="assets/styles/normalize.css">
        <link rel="stylesheet" href="assets/styles/main.css">
        <link rel="stylesheet" href="assets/styles/mobile.css">

        <!-- Favicon: Change to whatever you like within the "assets/images" folder. -->
        <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon" />
    </head>

    <body>
        <section id="gallery">
            <!-- Gallery: Just a sample "medium" sized gallery. -->

            <!-- Gallery: Just a sample "small" sized gallery. -->
            <div class="gallery small">
                <h2><span>Logos</span> All logos remain the property of their respective commissioners.</h2>
                <a style="background-image: url('assets/photos/EmpathinkV3cleaned.png');" href="assets/photos/EmpathinkV3cleaned.png"></a>
            </div>


        </section>

        <!-- Required Scripts: Not too much needed for Gallery. -->
        <script src="https://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
        <script src="assets/scripts/main.js"></script>
    </body>
</html>

I've googled and checked W3, but can't identify where I'm messing up. I would appreciate any help!

Answer 1

ok you have stylesheet.css included font in css with this code:

@font-face {
    font-family: lobster_1.3regular;
    src: url('lobster_1.3-webfont.eot');
    src: url('lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.3-webfont.woff2') format('woff2'),
         url('lobster_1.3-webfont.woff') format('woff'),
         url('lobster_1.3-webfont.ttf') format('truetype'),
         url('lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

and in main.css you include font in css with this code:

@font-face {
    font-family: myFirstFont;
    src: url('lobster_1.3-webfont.eot');
    src: url('lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.3-webfont.woff2') format('woff2'),
         url('lobster_1.3-webfont.woff') format('woff'),
         url('lobster_1.3-webfont.ttf') format('truetype'),
         url('lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

and in you're .gallery h2 css you call Font font-family: myFirstFont; . But your font files isn't in same folder as main.css. So or change fonts paths in main.css or call font family in .gallery h2 with font-family: lobster_1.3regular; .

Custom CSS Font installation

Question

1 answers

solution1
0 2015-07-26 18:20:01

Custom CSS Font installation

Question

1 answers

solution1 0 2015-07-26 18:20:01

solution1
0 2015-07-26 18:20:01