#HTML/CSS/Thymeleaf/SpringBoot Not applying font file / no acces

6 messages · Page 1 of 1 (latest)

old oyster
#

I am building a website with Thymeleaf and SpringBoot. I am trying to create titles with specific fonts, but if I try to access the ttf files via the browser it can not find them. They are under resources/static/fonts.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Insert your title here</title>
    </head>
    <body>    
        <header>
            <div class="searchBar">
                <img th:src="filter.png" alt="filter" id="filterIcon" class="icon" onclick="toggleDropdown()">
                <input id="searchQueryInput" type="text" name="searchQueryInput" placeholder="Search" value=""/>
                <img th:src="search.png" alt="search" id="searchIcon" class="icon" onclick="submitSearch()">
            </div>
        
            <div class="user-section">
                <img th:src="user_dark.png" alt="Account" id="user-icon" class="icon" onclick="location.href='/register'">
            </div>
        </header>
        <main>
            <div class="introduction">
                <img th:src="logo.png" alt="logo" id="logo" class="logo"> 
                <div class="headings">
                    <h1>Cooking Made Easy</h1>
                    <h2>Deine Rezepte, Dein Genuss!</h2>
                </div>
            </div>
        </main>     
    </body>
</html>
#

asd

# 

        <style>
            /*Font styles*/
            @font-face {
                font-family: 'SortsMillGoudy';
                src: url('/SortsMillGoudyRegular.ttf') format('ttf');
            }
            
            @font-face {
                font-family: 'Bugaki';
                src: url('/fonts/BugakiRegular.ttf') format('ttf');
            }
            
            @font-face {
                font-family: 'Roxborough';
                src: url('/fonts/Roxborough.ttf') format('ttf');
            }
# 
        
            * {
                margin: 0;
                padding: 0;
            }
            /* General body styles */ 
            body {
                background-color: #9B4922;
                color: #EFE7DD;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
                margin: 0;
            }
    
            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 0;
                margin-bottom: 30px;
                padding: 0vh;
                background-color: #FFFFFF;
                width: 100%;
            }
# 
            /* User Icon style */
            .icon {
                width: 30px;
                height: 30px;
                fill: #EFE7DD;
                float: right;
                padding: 20px;
            }
                    
            /* Icon container styles */
            .icon-container {
                display: flex;
                align-items: center;
                padding-bottom: 15px;
                margin-bottom: 30px;
            }
            
            .searchBar {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                z-index: 1;
            }
            
            #searchQueryInput {
                position: absolute;
                width: 350px;
                height: 2.8rem;
                background: #9B4922;
                outline: none;
                border: none;
                border-radius: 1.625rem;
                padding: 0 7rem 0 1.8rem;
                font-size: 1rem;
                color: #EFE7DD;
                z-index: 1;
            }
# 
            #searchQueryInput::placeholder{
                color: #EFE7DD;
                padding-left: 25px;
            }
            
            #searchQuerySubmit {
              width: 3.5rem;
              height: 2.9rem;
              margin-left: -3.5rem;
              background: none;
              border: none;
              outline: none;
            }
            
            #searchQuerySubmit:hover {
              cursor: pointer;
            }
            
            #searchIcon {
              position: absolute;
              top: 0.2rem;
              margin-left: 425px;
              width: 1.5rem;
              height: 1.5rem;
              fill: #666666;
              z-index: 2;
            }
            
            #filterIcon {
              position: absolute;
              top: 0.25rem;
              margin-right: 430px;
              width: 1.5rem;
              height: 1.5rem;
              fill: #666666;
              z-index: 2;
            }
            
            #filterIcon:hover {
              cursor: pointer;
            }
            
            .main{
                width: 100%;
                display: none;
            }
            
            .introduction{
                display: inline-block;
                align-items: center;
                width: 100%;
                height: 50%;
            }
            
            /* Logo styles */
            .logo {
                width: 450px;
                height: 450px;
                justify-items: left;
            }
            
            .headings{
                justify-items: right;
            }
            
            h1{
                font-family: 'Roxborough';
                font-size: 100px;
                font-weight: normal;
            }
            
            h2{
                font-family: 'SortsMillGoudy';
                font-size: 40px;
                font-weight: normal;
            }