Mixing
CSS Font is not displaying properly on devices
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>
html css fonts
edited Jan 25 at 19:44
Studocwho
1,19011321
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
add a comment |
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>
html css fonts
edited Jan 25 at 19:44
Studocwho
1,19011321
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
Could I see the way you’re using the font? E.g the font-family rule (which I assume is in Styles.css)
– WillW
Jan 2 at 0:31
Here is the CSS code: header { font-family: JohnDoe; font-weight: normal; font-size: 4.0vw; line-height: 0px; text-shadow: 0px 0px; text-indent: 18%; text-decoration: none; color: #000000; } nav { font-family: JohnDoe; font-size: 3.5vw; line-height: 0px; text-indent: 18%; text-shadow: 0px 0px; text-decoration: none; margin-left: 0px; margin-bottom: 0.5em; margin-top: 0.5em; color: #000000; }
– Justin Radziewicz
Jan 2 at 0:34
Cool. So to use a custom font-family, you’ll need to load that font using an @font-face rule w3schools.com/cssref/css3_pr_font-face_rule.asp
– WillW
Jan 2 at 0:38
1
Awesome. Thanks.
– Justin Radziewicz
Jan 2 at 0:44
add a comment |
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>
html css fonts
edited Jan 25 at 19:44
Studocwho
1,19011321
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
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>
html css fonts
html css fonts
edited Jan 25 at 19:44
Studocwho
1,19011321
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
edited Jan 25 at 19:44
Studocwho
1,19011321
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
edited Jan 25 at 19:44
Studocwho
1,19011321
edited Jan 25 at 19:44
Studocwho
1,19011321
edited Jan 25 at 19:44
Studocwho
1,19011321
1,19011321
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
asked Jan 2 at 0:17
Justin RadziewiczJustin Radziewicz
43
43
Could I see the way you’re using the font? E.g the font-family rule (which I assume is in Styles.css)
– WillW
Jan 2 at 0:31
Here is the CSS code: header { font-family: JohnDoe; font-weight: normal; font-size: 4.0vw; line-height: 0px; text-shadow: 0px 0px; text-indent: 18%; text-decoration: none; color: #000000; } nav { font-family: JohnDoe; font-size: 3.5vw; line-height: 0px; text-indent: 18%; text-shadow: 0px 0px; text-decoration: none; margin-left: 0px; margin-bottom: 0.5em; margin-top: 0.5em; color: #000000; }
– Justin Radziewicz
Jan 2 at 0:34
Cool. So to use a custom font-family, you’ll need to load that font using an @font-face rule w3schools.com/cssref/css3_pr_font-face_rule.asp
– WillW
Jan 2 at 0:38
1
Awesome. Thanks.
– Justin Radziewicz
Jan 2 at 0:44
add a comment |
Could I see the way you’re using the font? E.g the font-family rule (which I assume is in Styles.css)
– WillW
Jan 2 at 0:31
Here is the CSS code: header { font-family: JohnDoe; font-weight: normal; font-size: 4.0vw; line-height: 0px; text-shadow: 0px 0px; text-indent: 18%; text-decoration: none; color: #000000; } nav { font-family: JohnDoe; font-size: 3.5vw; line-height: 0px; text-indent: 18%; text-shadow: 0px 0px; text-decoration: none; margin-left: 0px; margin-bottom: 0.5em; margin-top: 0.5em; color: #000000; }
– Justin Radziewicz
Jan 2 at 0:34
Cool. So to use a custom font-family, you’ll need to load that font using an @font-face rule w3schools.com/cssref/css3_pr_font-face_rule.asp
– WillW
Jan 2 at 0:38
1
Awesome. Thanks.
– Justin Radziewicz
Jan 2 at 0:44
Could I see the way you’re using the font? E.g the font-family rule (which I assume is in Styles.css)
– WillW
Jan 2 at 0:31
Could I see the way you’re using the font? E.g the font-family rule (which I assume is in Styles.css)
– WillW
Jan 2 at 0:31
Here is the CSS code: header { font-family: JohnDoe; font-weight: normal; font-size: 4.0vw; line-height: 0px; text-shadow: 0px 0px; text-indent: 18%; text-decoration: none; color: #000000; } nav { font-family: JohnDoe; font-size: 3.5vw; line-height: 0px; text-indent: 18%; text-shadow: 0px 0px; text-decoration: none; margin-left: 0px; margin-bottom: 0.5em; margin-top: 0.5em; color: #000000; }
– Justin Radziewicz
Jan 2 at 0:34
Here is the CSS code: header { font-family: JohnDoe; font-weight: normal; font-size: 4.0vw; line-height: 0px; text-shadow: 0px 0px; text-indent: 18%; text-decoration: none; color: #000000; } nav { font-family: JohnDoe; font-size: 3.5vw; line-height: 0px; text-indent: 18%; text-shadow: 0px 0px; text-decoration: none; margin-left: 0px; margin-bottom: 0.5em; margin-top: 0.5em; color: #000000; }
– Justin Radziewicz
Jan 2 at 0:34
Cool. So to use a custom font-family, you’ll need to load that font using an @font-face rule w3schools.com/cssref/css3_pr_font-face_rule.asp
– WillW
Jan 2 at 0:38
Cool. So to use a custom font-family, you’ll need to load that font using an @font-face rule w3schools.com/cssref/css3_pr_font-face_rule.asp
– WillW
Jan 2 at 0:38
1
1
Awesome. Thanks.
– Justin Radziewicz
Jan 2 at 0:44
Awesome. Thanks.
– Justin Radziewicz
Jan 2 at 0:44
add a comment |
4 Answers
4
active
oldest
votes
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.
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
add a comment |
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
answered Jan 2 at 0:48
WillWWillW
1467
add a comment |
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";
}
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
add a comment |
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.
answered Jan 2 at 17:38
NawarajNawaraj
184114
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999986%2fcss-font-is-not-displaying-properly-on-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
add a comment |
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.
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
add a comment |
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.
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
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.
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
answered Jan 2 at 0:35
Kevin ØsterkildeKevin Østerkilde
17217
17217
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
add a comment |
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
I thought that would be the case.
– Justin Radziewicz
Jan 2 at 0:37
add a comment |
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
answered Jan 2 at 0:48
WillWWillW
1467
add a comment |
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
answered Jan 2 at 0:48
WillWWillW
1467
add a comment |
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
answered Jan 2 at 0:48
WillWWillW
1467
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
answered Jan 2 at 0:48
WillWWillW
1467
answered Jan 2 at 0:48
WillWWillW
1467
answered Jan 2 at 0:48
WillWWillW
1467
answered Jan 2 at 0:48
WillWWillW
1467
1467
add a comment |
add a comment |
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";
}
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
add a comment |
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";
}
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
add a comment |
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";
}
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
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";
}
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
edited Jan 2 at 17:19
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
answered Jan 2 at 17:13
StudocwhoStudocwho
1,19011321
1,19011321
add a comment |
add a comment |
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.
answered Jan 2 at 17:38
NawarajNawaraj
184114
add a comment |
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.
answered Jan 2 at 17:38
NawarajNawaraj
184114
add a comment |
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.
answered Jan 2 at 17:38
NawarajNawaraj
184114
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.
answered Jan 2 at 17:38
NawarajNawaraj
184114
answered Jan 2 at 17:38
NawarajNawaraj
184114
answered Jan 2 at 17:38
NawarajNawaraj
184114
answered Jan 2 at 17:38
NawarajNawaraj
184114
184114
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999986%2fcss-font-is-not-displaying-properly-on-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could I see the way you’re using the font? E.g the font-family rule (which I assume is in Styles.css)
– WillW
Jan 2 at 0:31
Here is the CSS code: header { font-family: JohnDoe; font-weight: normal; font-size: 4.0vw; line-height: 0px; text-shadow: 0px 0px; text-indent: 18%; text-decoration: none; color: #000000; } nav { font-family: JohnDoe; font-size: 3.5vw; line-height: 0px; text-indent: 18%; text-shadow: 0px 0px; text-decoration: none; margin-left: 0px; margin-bottom: 0.5em; margin-top: 0.5em; color: #000000; }
– Justin Radziewicz
Jan 2 at 0:34
Cool. So to use a custom font-family, you’ll need to load that font using an @font-face rule w3schools.com/cssref/css3_pr_font-face_rule.asp
– WillW
Jan 2 at 0:38
1
Awesome. Thanks.
– Justin Radziewicz
Jan 2 at 0:44