My website is not showing my fonts...
CSS Code is as follows...
#font-face {
font-family: 'IconicStroke';
src: url("fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
Please help...
It is showing in my machine but its not showing after uploading in the space....
There is no http://rgvnnemfl.com/iconic.css, which I'm guessing is where you have the above code. I think your link to the iconic.css is wrong.
If your css in css folder, then your fonts path may be
../fonts/iconic/iconic_stroke.eot
#font-face {
font-family: "IconicStroke"; src: url('../fonts/iconic/iconic_stroke.eot');
}
.iconic {
font-family: "IconicStroke", sans-serif;
}
This should work just fine.
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 use this code to implement a personalized font:
CSS
#font-face{
font-family:'playtime';
src: url('../fonts/font-1.otf') format('opentype');
}
p.playtime-font {
font-family: 'playtime', Verdana, Arial, Helvetica, sans-serif;
font-size: 3em;
}
HTML
<div class="texto-horario">
<p class="playtime-font">Horario</p>
</div>
But it does not work, I've tried it on Chrome and Safari and nothing...
I don't know what I am doing wrong please anyone can help me?
Try it without the single quotes:
#font-face{
font-family: playtime;
src: url('../fonts/font-1.otf') format('opentype');
}
p.playtime-font {
font-family: playtime;
font-size: 3em;
}
If this doesn't work, is your console saying anything?
I have the following font files:
Raleway-Bold.ttf
Raleway-ExtraBold.ttf
Raleway-ExtraLight.ttf
Raleway-Heavy.ttf
Raleway-Light.ttf
Raleway-Medium.ttf
Raleway-Regular.ttf
Raleway-SemiBold.ttf
Raleway-Thin.ttf
Now i have implemented them in my css like follow:
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
.bold
{
font-family: "Raleway-bold"; !important;
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
.extraBold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraBold.ttf');
}
.extraLight
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraLight.ttf');
}
.heavy
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Heavy.ttf');
}
.light
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Light.ttf');
}
.medium
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Medium.ttf');
}
.thin
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Thin.ttf');
}
.semi_bold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
However when i change the class to semi_bold for example nothing changes? so am i implementing them in a wrong way or am i missing something?
Note That the first raleway the font-face works fine but it is the rest that doesnt seem to make any changes to my text
You need to define all of your custom fonts in #font-face blocks. Only then can you use them in normal styles. Here you have defined Raleway only, so those classes which use it (all except .bold) will use Raleway-Regular.ttf.
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
#font-face {
font-family: 'Raleway-bold';
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
#font-face {
font-family: 'Raleway-semibold';
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
...
.normal {
font-family: 'Raleway';
}
.bold {
font-family: 'Raleway-bold';
}
...
Note that you need to define somewhere that ordinary text should use font-family: 'Raleway';.
You need to declare each typeface (here, each font weight) in a #font-face rule of its own. You should also use different font formats to cover all browsers. For a simple example for the former principle, see font-face weight and for the latter, use e.g. the FontSquirrel generator.
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');
}