#font-face help it do not work - html

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;
}

Related

css font family code not working for cusotom text

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

Font-Family does not change

I have downloaded the Twitch font, which is Twitchy.TV.
I'm trying to use it, but when I type the font, it doesn't recognize it.
I think it might be because Twitchy (.) TV. The period is messing it up.
I have tried putting it with "" or ''.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCH</h1>
</div>
</div>
.left h1 { font-size: 22px; color: #fff; font-family: Twitchy.TV; }
Have you included a #font-face declaration in your CSS?
Nowadays the best format for using fonts on the web is .woff or woff2 files, if you don't have your font in this format there are a lot of web font converters available.
#font-face {
font-family: 'Twitchy.TV';
src: url('Twitchy.TV.woff2') format('woff2'),
url('Twitchy.TV.woff') format('woff')
}
(Assuming you have font files in the same directory as your stylesheet named Twitchy.TV.woff and/or Twitchy.TV.woff2)
If you're just testing the font during development and have it locally installed, you can specify a local installation like this:
#font-face {
font-family: 'Twitchy.TV';
src: local('Twitchy.TV');
}
Then you are able to use it like:
.left h1 {
font-family: 'Twitchy.TV';
}
Ensure that you have imported the font if it is from an external source!
If you have downloaded the font, make sure that you have added it to the list of font-families in your computer. This can be done in the Control Panel.
You need to import the font at the top of your CSS using #font-face. This allows you to use non-websafe fonts in your website. the src: url can be either a path in the local storage or on an external site.
#font-face {
font-family: "Twitchy.TV";
src: url("path/to/font.ttf");
}
You can use the font like this
.left h1 {
font-family: "Twitchy.TV";
}
first of all upload you font here https://transfonter.org/ and then you will have generated font prepared and add all your fonts to assets folder and in style.css or style.scss open downloaded folder from transfonter and copy what's inside stylesheets.scss and add to your style.css and then make sure to be correct path to fonts assets/fonts for exameple
#font-face {
font-family: 'Roboto';
src: url('Roboto-Black.woff2') format('woff2'),
url('Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
And then in style.css use it, example
h1 {
color: red;
font-family: 'Roboto', sans-serif; //Here you add default font in case the browser
can't find Roboto font
}

#font-face won't work. how do I do this properly?

So I have this custom font and it won't work. Please help.
#font-face{
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font-size: 60px;
font-style: 'Anton',sans-serif;
}
#font-face {
font-family: myFont;
src: url(fonts/Akrobat-Bold.otf);
}
.h1{
font-family: "myFont";
}
For example, I put .otf font file in folder fonts, that works without problem. You will just change name of your font and source path.
A couple things could be happening.
First, your h1 tag is using font-style instead of font, so:
#font-face {
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font: 'Anton',sans-serif;
font-size: 60px;
}
i.e. font rather than font-style on the h1.
Also, it looks like its possible you are using Rails or some other framework based on the folder structure you are using. If so, its possible that the framework is digesting your asset (i.e. fingerprinting it so its Anton-Regular.ttf-02987910hsa or something like that in case it changes so your browser doesn't cache it incorrectly. If you are using Rails, you'll need to use asset-url('URL') in order to get the most recently fingerprinted asset.

Google Font #import + #font-face?

I'm trying to import fonts with Google Fonts with #import and #font-face, in my CSS. I used to only use #font-face with downloaded fonts, but since it takes time to load, I preferred to use the Google Fonts method.
I didn't wanted the "bold" version of Roboto as the "bold" font in my website, so I used #font-face. However, I'm not sure of the way to use it. Is this correct to use #import and #font-face like this?
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
#font-face
{
font-family: Roboto;
src: url("https://fonts.googleapis.com/css?family=Roboto:400");
}
#font-face
{
font-family: Roboto;
font-weight: bold;
src: url("https://fonts.googleapis.com/css?family=Roboto:500");
}
#font-face
{
font-family: Roboto;
font-style: italic;
src: url("https://fonts.googleapis.com/css?family=Roboto:400i");
}
#font-face
{
font-family: Roboto;
font-weight: bold;
font-style: italic;
src: url("https://fonts.googleapis.com/css?family=Roboto:500i");
}
I've the feeling I'm importing the fonts twice... but it doesn't even work! (The page displays the default browser font)
Thank you for reading and taking time to help me.
you can use like this in your stylesheet
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2{
font-family:Roboto;
}
#font-face make sense when you loading font from files on your server. If you importing from google, use only import and write right properties to elements you want.
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2 {
font-family:Roboto;
font-weight: 500;
}

Add font to website

I am trying to add Ubuntu font to my website, I'd like to have it universal on the site so everything is in that font but I started by just adding it to my h1 tag to see if it works, but it doesn't work. I have uploaded the font to my server.
This is my css so far:
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Ubuntu', sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: -1px;
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #000;
margin-bottom : 0.2em;
font-size : 3em; /* 96 / 16 */
line-height : 1.4;
}
I'm probably being really stupid, as usual. I've looked at other examples but can't really see what I am doing wrong.
The problem can be solved in 2 ways.
You can either add the google font cdn to the head tag of your website if already hosted or if you have active internet access, so you don't need to worry adding it locally in your folder.
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
Like so
Or probably your file path location is wrong
if your fonts are packed the root directory, you can easily call it like
src: url('Ubuntu-R.ttf') format('truetype');
But if it is in a folder (e.g ubuntu)
it can be src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
But if in a very long path.. try doing something like this
src: url(../ubuntu/Ubuntu-R.ttf);
Then calling the font-family attribute, call just "one" name, if it is locally in a folder. like so
#font-face {
font-family: Ubuntu;
src: url(ubuntu/Ubuntu-R.ttf);
}
.myclass{
font-family:Ubuntu; // The exact name for the #font-face
}
Hope it helps
It is as simple as adding this line as the first line of your style.css or whatever you call it:
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
It takes care of everything, and then you can just start using it in your css:
.ubuntu-font {
font-family: "Ubuntu";
}
If you'd like bold and italic or some other things as well, you can just go here, pick those that you want, and copy the #import from section 3 in that page.
Also, with this you do not need to upload the font to your server, I don't see why everyone should upload all fonts to their server when there are several fast CDNs that already have everything there.