Browser won't recognize my custom font

Does anyone know why my browser won’t recognize my custom font in this header section?

https/ /azteramaikoa.000webhostapp. com/

There’s a hint here:

https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fazteramaikoa.000webhostapp.com%2Fcss%2Famstyle.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

3 Likes

I’ve already tried using single quotes, double quotes, and not using quotes.

This might help.

Try

format("truetype")

not

format("ttf")

If that doesn’t work, try without the local and see if it works then.

Hi there mrivera,

check out the attachment, which has a working example.

bahnschrift.zip (58.3 KB)

It also includes a "Bahnschrift.woff " font which renders
in all devices except " Opera Mini ".

Source:-

WOFF - Web Open Font Format

coothead

Made sense of it.

Its a Chrome bug which does not render textual styles effectively.

Here’s the connection to the bug https://code.google.com/p/chromium/issues/detail?id=336476

I attempted CSS strategies which were referenced in the post however it didnt work for me.

So I put jquery in my footer which happened to fix the issue, it conceals all components in the body and reshow it.

Their resembles a couple of moments delay before it appears yet its an impermanent fix until Google bounce on this.

This jquery ought to be in the footer.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>  <script type="text/javascript" charset="utf-8">
$(function() { $('body').hide().show(); });
</script>

I am pretty sure that " jQuery " will not be
required for this simple CSS project. :unhappy:

Here are example renderings of my code…

Chrome

Chrome

Firefox

Firefox

coothead

1 Like

This bug was opened and closed in 2014, fixed 38 versions of Chrome ago. Don’t think that’s your problem.

2 Likes