CSS Font is not displaying properly on devices
Question
CSS "JohnDoe" font will not display on other devices. Screenshot from my browser: johndoe font
I made a website for my wife (michelleradztattoo.com). Everything looks fine on my computer. When we look at the site on our phones or her laptop, the text displays like a basic font.
My guess is since the font is installed on my computer it displays correctly on the browser (chrome). I've moved the CSS around in the head section, no changes. I had it located before the and now after. Is it something with the "text.css" located in the fancybox. I tried deleting it out of the fancybox section.
<head>
<meta charset="utf-8">
<title>Art</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<style type="text/css">
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
<link href="Styles.css" rel="stylesheet" type="text/css">
</head>
4 answers
solution1
1 2019-01-02 00:35:10
The problem here is that the font exists on your computer, but not on your phone. Chances are if I were to visit your site on my computer, I wouldn't see the font either because I don't have it downloaded.
In cases like this, you should use a Webfont from example http://fonts.google.com . This way everyone will be able to see the specified font.
solution2
0 2019-01-02 00:48:21
Just reposting this for others:
Make sure to define the font family using a font-face rule. https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
solution3
0 2019-01-02 17:13:40
As others have suggested, this is to do with the font being solely installed on your computer and no other device has any reason to have it installed.
You can use Google Fonts , but there's no saying that they will have every font under the sun.
I suggest and recommend that you upload the font file to your hosting, where you website resides, this way your website will be able to access the correct font at all times no matter the browser or device.
You will most likely need various font file types, to accomodate for all devices/browsers. You can probably find and download most of these types via Google search. However, if you can't then this Online Font Converter is rather good for converting your font file to other file types that you need.
Once your font is uploaded to your website, you can go ahead and use the @font-face css rule to define the font.
Please take the time to read this CSS-Tricks Article . It explains quite alot about @font-face , the different file types and which to use.
I would suggest you opt for the " Deepest Possible Browser Support " and use this:
@font-face {
font-family: 'MyWebFont';
src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Then use it like normal...
.example p {
font-family: "MyWebFont";
}
solution4
0 2019-01-02 17:38:39
I have visited http://michelleradztattoo.com/ from my mobile and it shows your font. This may be happening because of js link is on heading. So can you please, put your js link just before the </body> . And let me know, what difference you will get.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.