Пользовательский шрифт CSS Установка шрифта

Я пытаюсь установить собственный шрифт на свой сайт. Шрифт: Lobster. Конкретная страница, где я пытаюсь установить шрифт, - here. У меня есть веб-кит для шрифта, уже размещенного на моем сайте.Пользовательский шрифт CSS Установка шрифта

Вот соответствующая часть основного стиля 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; 
}

Вот HTML код страницы.

<!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>

Я искал Google и проверял W3, но не могу определить, где я возился. Буду признателен за любую помощь!

источник

2015-07-26 Sami

Консоль сообщает вам все, что вам нужно знать. Файлы шрифтов возвращают 404 (т. Е. Проверьте правильность пути к файлу). –

- ваш шрифт в той же папке, что и ваш файл stylesheet.css? –

Вам необходимо объявить семейство шрифтов на элементе, таком как тело – 2ne

хорошо вы stylesheet.css включены шрифт в CSS с помощью этого кода:

@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; 

}

и main.css Вы включаете шрифт в CSS с этим кодом:

@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; 

}

и в вас» re .gallery h2 css вы называете Font font-family: myFirstFont;. Но ваши файлы шрифтов находятся не в той же папке, что и main.css. Так или измените пути шрифтов в main.css или позвоните в семейство шрифтов в .gallery h2 с font-family: lobster_1.3regular;.

источник

2015-07-26 18:20:01

Пользовательский шрифт CSS Установка шрифта

ответ

Смежные вопросы