Browser won't recognize my custom font

Get Started
1

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

https/ /azteramaikoa.000webhostapp. com/

2

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
3

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

4

This might help.

Try

format("truetype")

not

format("ttf")

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

5

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

6

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

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
8

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

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.