1

I have a custom local font that i am trying to load, but it just wont display. I have checked about all the stack exchange posts about this subject and none of the provided solutions seem to work.

I have tried absolute paths, relative paths, clearing the cache and other things like using different names what ever.
But it wont display :(

See here my current setup:

HTML:

<link rel="stylesheet" href="css/boilerplate/fonts.css">
<link rel="stylesheet" href="css/index.css">

<div id="grid_item_2" class="text_center">
    <h1>Bienvenido<br>a Some app</h1>
    <h3>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium nostrum accusamus, unde excepturi placeat sapiente explicabo rerum iusto? Mollitia commodi vitae veniam quasi.</h3>
</div>

CSS:

font css:

@font-face {
    font-family: Lilita;
    src: url(../../Data/Frontend/Fonts/LilitaOne.ttf) format('ttf');
}

Index css:

#grid_item_2 h1 {
    font-family: Lilita;
    -webkit-text-stroke: 1px #000;
    text-shadow: 0px 0px 2px #4C4C4C;
    line-height: 25px;
    color: rgb(255, 180, 17);
    padding: 20px 0 0 0;
}

Here is the file structure to all the relevant files:
Path to the css:
enter image description here

Path to the fonts:
enter image description here

If there is any information missing or needed please let me know!
I am very desperate atm

Community
  • 1
  • 1
FutureCake
  • 2,614
  • 3
  • 27
  • 70
  • Try to look at this topic [https://stackoverflow.com/questions/47340584/downloaded-font-wont-display-properly/47345855#47345855](https://stackoverflow.com/questions/47340584/downloaded-font-wont-display-properly/47345855#47345855) – Sfili_81 May 21 '20 at 11:36
  • 1
    @Sfili_81 yeah this font generator fixed it.. I have no clue why.. But it works thanks – FutureCake May 21 '20 at 11:56

1 Answers1

0

Try to enclose font path inside quote (' ' or " ") and change the format text to truetype instead of ttf. It is best to use lower-case for font URL.

@font-face {
font-family: 'Lilita';
src: url('../../data/frontend/fonts/lilitaone.ttf') format('truetype');
}
deep
  • 57
  • 6