CSS Font issues on different devices

Status
Not open for further replies.

XCOLVE

Active Member
493
2014
364
1,155
Hi,

I'm by no stretch of the imagination educated in the field but i'm trying to understand why fonts that are supposed to be "web safe" are being rendered differently on different devices.

On my main machine the Impact font i'm using looks beautiful, but on another windows machine (windows 2008 server) it looks jagged

And then on my phone the font looks completely different, it looks like it's using arial or something, wtf? :)

Any ideas?

__________________
Added after 17 minutes:

example, this extremely primitive html code will generate a working impact font on my computer, but on the phone the font looks like a bold arial font, what the hell am i doing wrong


<head>
<title>test</title>
<style>h1 {font-size:200px; font-family:impact; font-weight:normal; text-transform:uppercase; color:#000; }</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
 
Last edited:
6 comments
Verdana

For Verdana:

font-family: Verdana, Geneva, sans-serif;

You could upload the font to webserver and use as:


font-family: 'Verdana', Verdana, Geneva, sans-serif;
 
What do you mean? Isn't web safe fonts supposed to work without having to host any font files? I came across "Font Awesome" and it seems to be something i need to learn how to utilize.
 
What do you mean? Isn't web safe fonts supposed to work without having to host any font files? I came across "Font Awesome" and it seems to be something i need to learn how to utilize.

Both are web safe.

font-family: Verdana, Geneva, sans-serif;

or you could upload the font to webserver and use as:

font-family: 'Verdana', Verdana, Geneva, sans-serif;
 
I recommend you to use Google Fonts
its just a line of code, go get it from fonts.google.com and use it.
with google font no matter from where you access your site UI (fonts) will be the same.

quick tip:
Just R&D about google fonts and how to use it

Cheers
 
add this meta tag on your site:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
Status
Not open for further replies.
Back
Top