css font family code not working for cusotom text - html

i want to use a custom font for my website but it's not working.
font name "Road_Rage"
link: [road rage font link][1]
[1]:
#font-face {
font-family: 'road';
src: url('https://youssef-habchi.com/Emb/Road-Rage/Road_Rage.woff');
font-style: normal;
}
p{
font-family: 'road';
}
<p> this is your text </p>
please help me.

I suspect you running into a cross origin (CORS) problem.
I get this:
if I run this code from my server - ie the font file is on the same domain:
<style>
#font-face {
font-family: 'road';
src: url('Road_Rage.woff');
font-style: normal;
}
p{
font-family: 'road';
}
</style>
<p> this is your text </p
But I get it in Times New Roman (my default) if I try to serve the font from your given url.

Use True Type Font(TTF)
https://www.dafont.com/road-rage.font
Hope this helps

Related

How do I actually import external fonts to my website (CSS)

I searched the web and look for ways to add an external fonts to the web or CSS. I know we should use #font-face to do that. But, my website doesn't load the font when I reload. Can someone see the problems for me?
This is my codes:
<style>
#font-face {
font-family: 'vcr_osd_monoregular';
src: url('vcr_osd_mono-webfont.woff2') format('woff2'),
url('vcr_osd_mono-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 90px;
font-family: "vcr_osd_monoregular", sans-serif;
color: yellow;
}
</style>```
Instead of printing out vcr_osd_monoregular font, it prints out sans-serif. Please help.

#font-face - Using multiple files for one font

It seems this question has been asked numerous time already (such as here). But my issue does not seem to be resolved with the answers provided.
I am attempting to use multiple files for a single font. Each file is for a different style - italics, bold. I have attempted the following:
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
#font-face {
font-family: matrix;
font-weight: bold;
src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}
My HTML contains the following:
<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>
Unexpectedly, all the text outputted on the page is using the "...bold.tff" file. Why is this?
I have been able to achieve this easily and quickly in the past and am unsure as to what is different this time.
By browser default, h1 use bold text. See W3School for details.
Simply add h1{ font-weight: normal;} to reset this.
If you don't like the default css by browser, you can use some reset.css or normalize.css.
But, normalize.css treat h1 as bold text, too.
create different classes with font face and assign those classes to expected tags
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
.myh1 {
font-family : matrix;
font-weight : 400;
}
.myp {
font-family: matrix;
font-weight:700;
}
example
<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>
Maybe you must use <em></em> tags for styling because is deprecated in HTML4
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
Or you try change font-weight: bold; to font-weight: 700; and add this style
b { font-weight: 700; }
try this:
#font-face { font-family: 'BrushScriptStdMedium';
src: url('brushscriptstd.eot');
src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff')
format('woff'), url('brushscriptstd.ttf') format('truetype');}
.classname{ font:21px bold italic Arial;}

#font-face help it do not work

I created this test file
<h1> test <h1>
Then in CSS3, I did this
#font-face {
font-family: 'hello';
src:url('/fonts/HelloStockholm-Alt.otf')
font-style: normal;
font-weight: 100;
}
h1 {
font-family: hello;
font-weight: 100;
}
And this is the font I downloaded
https://www.dafont.com/de/hello-stockholm.font
Hopefully some of you guys can help me
You forgot to write ; at the end of the code
src:url('/fonts/HelloStockholm-Alt.otf');
UPDATE
Ok. I found right answer. I made your little project in my local and I downloaded font. It's not .otf file, it's .ttf file.
You just change type .otf to .ttf
Also if your html out of fonts folder then remove the / from font source. And maybe you renamed font file when I downloaded name was like that HelloStockholm-Regular
src:url('fonts/HelloStockholm-Regular.ttf');
Finally You forgot closed here h1 ;)
<h1> test </h1>
Hope it'll helps you. Good luck!)
Try to remove '/' before fonts
#font-face {
font-family: 'hello';
src:url('fonts/HelloStockholm-Alt.otf');
font-style: normal;
font-weight: 100;
}
h1 {
font-family: 'hello';
font-weight: 100;
}

Cross browser Semibold font issue

I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".
First method:
I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.
JS Fiddle
HTML
<p class="semi">
Abcd Efgh
</p>
CSS
.semi{
font-family:'Signika Semibold';
font-size:14px;
}
Second method:
I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.
JS Fiddle
HTML
<p class="weight">
Abcd Efgh
</p>
CSS
.weight{
font-family:'Signika';
font-weight:500;
font-size:14px;
}
Is there a workaround for fixing this issue?
Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.
Have a look at this page for some more details.
There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.
If you're interested in how these different smoothing techniques produce different outputs, check this out.
SOLUTION
Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))
Link of Google Font
Imported the font by including this code in HEAD section of HTML
<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>
Then in CSS,
For Normal
font-weight:400;
For Semi-bold
font-weight:600;
For Bold
font-weight:700;
By using this method, fonts on all browsers look alike.
Actually, your second JSFiddle had:
font-weight: 600;
Instead of 500.
Here's your fiddle updated.
http://jsfiddle.net/gbj7b1jp/1/
Now it's not bold.
Semibold usaly is font-weight:400;
However You scan specify Your font properties when importing fonts with #font-face:
#font-face {
font-family: Signika;
src: url(SignikaLight.otf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: Signika;
src: url(SignikaRegular.otf);
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: Signika;
src: url(SignikaSemibold.otf);
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: Signika;
src: url(SignikaBold.otf);
font-style: normal;
font-weight: 600;
}
This is a known issue in CSS. Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem.
http://www.cs.tut.fi/~jkorpela/listfonts.html

Will CSS3 #font-face not work with copyrighted or certain fonts?

I am having an issue trying to get #font-face to render fonts here. I can't seem to get it to work with Segoe (the font on WP7). The code looks correct, and I am using the latest version of Safari. I know its a copyrighted font, and it is just being used for a personal project, but i cant seem to get it to work. Can anyone help or have any suggestions?
#font-face {
font-family: segoe;
src: url('../font/segoe.ttf');
format: 'truetype';
}
p{
font-family: segoe;
}
<p>testing to see if this font will render</p>
Try using " (double quotes) not ' (single quotes).
#font-face {
font-family: segoe;
src: url("../font/segoe.ttf");
format: "truetype";
}
p{
font-family: segoe;
}
<p>testing to see if this font will render</p>