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';
}
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">
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'm trying to get a site up and running for a client but I'm having issues with the fonts. All of the fonts are working properly except for one, and I'm not sure why. The problem is even worse in Internet Explorer where 2 fonts don't work, and in Edge where nothing works. This is the code I'm using. The font that isn't working is "chunkfive".
#font-face {
font-family: 'chunkfive';
src: url('fonts/chunkfive-webfont-webfont.woff2') format('woff2'),
url('fonts/chunkfive-webfont-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'roboto';
src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
url('fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'streetwear';
src: url('fonts/streetwear-webfont.woff2') format('woff2'),
url('fonts/streetwear-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5 {
font-family: streetwear, serif;
}
nav {
background: #000;
border: solid 4px #FFF;
font-family: chunkfive, serif;
font-size: 22px;
left: 50%;
margin-left: -425px;
position: absolute;
top: 143px;
width: 850px;
z-index: 0;
}
ol,
p,
ul {
font-family: roboto, sans-serif;
font-size: 18px;
}
The fonts all work perfectly on my free website, but when posted on an account with GoDaddy, they haven't been working properly. Using chrome, I get the following error for each font, even though the fonts other than chunkfive display correctly:
GET http://website-url.com/css/fonts/streetwear-webfont.woff2
Does GoDaddy somehow restrict the way you can use fonts, or is there something else I need to fix?
THere are 2-3 things you can do to make this problem go away-
1. Check the linking is correct.
2. Try to use double quotes instead of single.
3. Check font folder premission as that is the main problem with go daddy.
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
Im trying to use a custom font using #font-face and for some reason its working on some places and not in others.
CSS
This works fine
#hero-header .title {
color: #fff;
padding-top: 225px;
font-size: 30px;
font-family: 'Populaire';
text-align: center;
font-size: 64px;
}
This doesn't
ul#reviews h2 {
font-size: 30px;
font-family: 'Populaire';
}
Notice the Hero area using a custom font but unable to use it further down the page, ie: the review titles.
Your CSS is:
#font-face {
font-family: 'Populaire';
src: url('font/Populaire.otf');
}
But, the font is actually in /beta/styles/css/fonts/Populaire.otf, please update your CSS to:
#font-face {
font-family: 'Populaire';
src: url('/beta/styles/css/fonts/Populaire.otf');
}