Welcome to WebmasterWorld Guest from 34.235.143.190

Forum Moderators: not2easy

Message Too Old, No Replies

Correct Font Not Displaying For Smaller Devices

Display Fonts For Smaller Devices

     
3:13 am on Dec 2, 2017 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


I want to use Impact font as part of a title in a header. Impact font shows correctly on my desktop but is replaced by another font on my iPad and iPhone.

Css for header:
.greentext {
font: normal 38px Impact, Charcoal, sans-serif;
color: #accb4d;
letter-spacing: 2px;
text-align: center;
margin: 0; padding: 0;
}
.bluetext {
font: normal 38px Impact, Charcoal, sans-serif;
color: #32afe6;
letter-spacing: 2px;
text-align: center;
margin: 0; padding: 0;
}
.whitetext {
font: 16px Arial Black, Gadget, sans-serif;
color: #eee;
letter-spacing: 2px;
text-align: center;
margin: 0; padding: 1px 0 0 0;
}
.bluetextsm {
font: 21px Arial Black, Gadget, sans-serif;
color: #32afe6;
letter-spacing: 1px;
text-align: center;
margin: 0; padding: 0;
font-weight: bold;
}

Css for sample media query:
@media screen and (max-width: 320px) {
.wrapper {width: 100%; margin: 0;}
.headerwrapper {width: 100%; margin: 0;}
header {height: auto;}
#logo {width: 98%; text-align: center; margin: 0 auto;}
.greentext, .bluetext {font: 28px;}
.whitetext {font: 16px;}
.bluetextsm {font: 21px;}

Html:
<div id="logo">
<span class= "greentext">Example1</span><span class= "bluetext">Example2</span>
<p class= "whitetext">Example3</p>
<p class= "bluetextsm">Example4</p>
</div>

How can i get Impact to load on smaller devices? Thanks!
6:37 am on Dec 2, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15638
votes: 795


You forgot to show your @font-face rule. Mobile devices using iOS should certainly support font embedding, but the syntax has to be right. It doesn't matter on a desktop because the font is probably installed anyway.
2:05 pm on Dec 2, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9714
votes: 925


Don't have apple products, so serious question: Is IMPACT one of the installed fonts on Macs/Apple?
6:56 pm on Dec 2, 2017 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


I'm a beginner. I was thinking that since Impact (normal) is a web-safe font and is available on my iMac without having been installed by me that it would be available on smaller Mac devices. Is that not correct? Even so it sounds like using the @font-face rule would be more reliable although it would require another http request. How would I implement the @font-face rule? I only need the Impact font for text in my site's header. I don't want to affect any of the other text. Thanks for your help!
7:48 pm on Dec 2, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15638
votes: 795


I only need the Impact font for text in my site's header.
It looks like you've already got that set up correctly. Defining a font for some specified purpose, such as headers, while leaving it undefined elsewhere, will never cause the named font to spill over where it isn't wanted.

:: pause to shudder at the idea of body text in Impact ::

The section on @font-face at at w3.org seems be be written for the sole purpose of scaring people out of their wits, so let's paraphrase (here cribbing from one of my own directories)
h1 {font-family: Impact;}
@font-face {font-family: Impact; font-weight: normal; font-style: normal; src: local("Impact"), url("/fonts/Impact.ttf");}
@font-face {font-family: FreeHeader; font-weight: bold; font-style: normal; src: local("Impact"), url("/fonts/Impact.ttf");}
The part with "local" is optional in an @font-face rule; it's most appropriate when dealing with a font that many users do have installed, so only the others will need to download. If you're unfamiliar with the wording of an @font-face line, note how it behaves:

“When the code specifies a normal-weight, non-italic Impact, get it from suchandsuch source.”

The second @font-face line, which looks exactly the same, is because the Impact font doesn't actually come in bold (or, for that matter, italic). If you goofed and the browser thinks it's supposed to be using a bold version--this is especially likely in headers, because their default is bold unless your CSS specifically says "font-weight: normal"--you protect yourself by telling the browser to use the same file. Otherwise it will try to fake it from the non-bold version; as you can imagine, this would look pretty ghastly in Impact. Italic would be even worse, but italic doesn't sneak in by accident. Add another pair of @font-face rules if you really want to play it safe.

And then, of course, you need your .ttf file installed where the CSS says to find it.

:: detour to check ::

On my system, the size of Impact.ttf is 138K. That's small enough to be embedded as-is. If it were larger than around 200K I'd edit it down in a font editor so users on smartphones aren't forced to download a bunch of stuff they will never use. (This is most dramatic in Chinese/Kanji fonts, which can run to tens of megabytes.)

:: further detour to FontBook ::

You may only (i) embed this font in content as permitted by the embedding restrictions included in this font; and (ii) temporarily download this font to a printer or other output device to help print content.


And, finally ... By the usual yawn-provoking coincidence, there have been a couple of threads about font naming just within the last couple of days. I think both were in this very subforum (CSS) so go read them. Option B is, as always:
h1 {font-family: Impact, sans-serif;}
There used to exist a splendid website that gave the percentages for various fonts on various operating systems, so you know which ones are safe to use, but it seems to have gone under :(
7:53 pm on Dec 2, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4296
votes: 288


Mobile devices of any brand have a limited number of installed fonts due to storage limitations. If you wish to use specific fonts it's a good idea to use web fonts. Google fonts [fonts.google.com] are commonly used to make specific fonts available without installing the font. You would just need to add the reference to your header.
11:12 pm on Dec 2, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15638
votes: 795


not2easy!

:: screaming with excitement ::

You’re baaaack! We were all so worried.
2:04 am on Dec 3, 2017 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


Fixed! I used a Google font since I already use another Google font for my h1 and h2 titles. Is there a recommended online tester for different mobile devices so I can adjust the font sizes in my media queries? The testers I've tried used the "desktop" version of my site for the header section. Thanks so much for your help!
3:04 am on Dec 3, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9714
votes: 925


Happy for the resolution! Meanwhile, I don't trust on line emulators, but I do trust my friends and their various devices. I just check sites using their equipment! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members