I'm using font name Hacen_Liner_XL, it's arabic font.
I tested it on android and iOS device. iOS devices not render this font properly. Here a screen shots one on android and second one for iOS.
I have this format only .ttf Here my CSS Code
#font-face {
font-family: 'Hacen';
src: url("/new/fonts/Hacen_Liner_XL.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
html,
body{
color:#333;
line-height: 1.4;
font-family: Hacen, Arial, sans-serif;
font-size: 16px;
text-align: right;
direction: rtl;
margin: 0;
padding: 0;
}
Android
iOS
Related
I have been dealing with this issue all day and I can't seem to find a solution at all to why this is happening. The font family that I'm trying to set for the text on my website won't load on any other device at all, no matter what I try to do. It only loads on PC but nothing else that I test the site on. It's seriously annoying me.
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
#font-face {
font-family: "Roboto", sans-serif;
src: url("fonts/roboto-v20-latin-regular.eot");
src: url("fonts/roboto-v20-latin-regular.eot") format("embedded-opentype"),
url("fonts/roboto-v20-latin-regular.woff2") format("woff2"),
url("fonts/roboto-v20-latin-regular.woff") format("woff"),
url("fonts/roboto-regular.ttf") format("truetype"),
}
#font-face {
font-family: "Roboto Light", sans-serif;
src: url("fonts/Lightversion/Roboto-Light.eot");
src: url("fonts/Lightversion/Roboto-Light.eot") format("embedded-opentype"),
url("fonts/Lightversion/Roboto-Light.ttf") format("truetype"),
url("fonts/Lightversion/Roboto-Light.woff") format("woff");
}
body {
font-family: "Roboto", "Roboto Light", sans-serif;
margin: 0 auto;
background-image: url(../images/playstation-pattern.png);
background-repeat: repeat;
background-position: center;
}
.welcome {
height: 100%;
display: flex;
color: #404040;
font-family: "Roboto Light", sans-serif;
text-align: center;
line-height: normal;
}
.inner-welcome {
width: 300px;
margin: auto;
}
.welcome h2 {
margin-top: 0;
font-family: "Roboto Light", sans-serif;
font-weight: bold;
}
.welcome p {
margin-bottom: 0;
}
a:link {
text-decoration: none;
font-weight: bold;
color: #404040;
}
a:hover {
filter: brightness(1.75);
color: #404040;
}
a:visited {
text-decoration: none;
color: #404040;
}
i {
font-weight: normal;
}
Try this: Taken from the google fonts site, add the following to the head of your document:
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>
and then add the following in your stylesheet:
font-family: 'Roboto', sans-serif;
This should take care of the Roboto Font.
In terms of the Light font, confirm that the fonts are in the /fonts/ folder in your site directory. It looks like it's using a fallback.
Hope this works for you.
The Roboto don't family isn't imported properly. Here you have tried to import locally and remotely using Google font api. It is wrong. You should follow only one method of above.
The reason for issue occurs in all other devices and not in PC is that Roboto font has been installed to the PC. As other devices couldn't find Roboto font internally, they are trying to load that fallback font called sans serif.
Remove that import css rule and try to link Google font inside header tag of your index.html as shown below
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap">
All bold versions of fonts appear strange on mobile device, I made the font enormous for testing purpose and from that it seems the font kind of "doubles" over itself, with a minor offset between them. If and when I zoom to look closer at the text it "becomes" normal - and shows just as it should show (and does show, on desktop browser).
Non-zoomed printscreen
Zoomed printscreen
There's not really any "voodoo" code to show, it's all very basic. All bold fonts just look strange at their shown state unless you pinch-zoom them on mobile. But for the sake of it:
.title {
font-size: 30px;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 500; /* same problem with 900 */
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
<div class="title">
World wide shipping for flat rates!
</div>
I tried different browsers on mobile, and all show the same issue. This happens to ALL fonts when bold, not just the one I use in this example.
<style type="text/css">
.title {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 900;
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}
<div class="title">World wide shipping for flat rates!</div>
I'm trying to use some customized font in my application.
So i tried downloading Pacifico and trying to use in my application. But getting Failed to decode downloaded font and the font is not loading
Below is my CSS .
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
This is not working. So i tried converting this to .woff as per suggestions found in web and tried below. Even this is failing. I'm using Chrome 74.0 version . How to solve this?
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf'),
url('#WORKSPACE_IMAGES#Pacifico.woff') format('woff'),
url('#WORKSPACE_IMAGES#Pacifico.woff2') format('woff2');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
Problem here is you need upload the font into /i/
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/i/Pacifico.ttf");
}
body {
font-family: "Pacifico", serif;
font-weight: 300 !important;
line-height: 25px !important;
font-size: 14px !important;
}
I don't know why Apex is not resolving the #WORKSPACE_IMAGES# but you can upload the font in the web server. In my case I'm using tomcat
I have a div with a font-family: "Cooper Std Black";. It looks like the image below:
But when I use another computer, same browser (Google Chrome/ both updated) the way it looks changes. What is happening? I had made sure that the cache of both browser is cleared.
Below is my CSS Code:
.myid_print_duo_college
{
z-index: 1;
position: absolute;
left: 0px;
top: 440px;
color: #0C6A13;
width: 304px;
height: 42px;
line-height: 42px;
text-align: center;
font-weight: bold;
font-size: 20px;
font-family: "Cooper Std Black";
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
It looks like Cooper Std Black isn't installed on the other computer. Maybe you installed this font manually on your computer. This question could help you on how to embed a font properly.
You need to add your Font like
#font-face {
font-family: 'Cooper Std Black';
src: url('fonts/Cooper Std Black.eot'), url('fonts/Cooper Std Black.ttf') format('truetype'), url('fonts/Cooper Std Black.svg') format('svg');
font-weight: bold;
font-style: normal;
}
You can use this Font like below:
.myid_print_duo_college
{
font-family:'Cooper Std Black';
}
i am create a project in cordova 3.4 and set a custom font to h3, it working fn in ios devices and some android but some android devices (like 10" and above tablets) are not supporting the font I don't have any idea
#font-face{
font-family: "arabic";
src: url('../fonts/arabic.ttf') format('truetype');
}
h3 {
font-family: arabic;
font-size: 22px;
padding-bottom: 0;
margin: 0;
line-height: 21px;
font-weight: 400;
color: black;
display: block;
color: #082F68;
}
You don't use default style of h3,
Then why are you using this tag,
I
think ** SPAN ** is better option in this time