I want to specify a custom font in my style sheet. I can get the font to work in a link statement in my html header, but I'd rather put it in my style sheet. When I uncomment the link statement, it works. Here's my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Bug</title>
<link rel="stylesheet" href="fontBug.css">
<!-- <link href='https://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet'>-->
</head>
<body>
<p>This is normal text. It should display in a sans-serif font in black against white.</p>
<p class="customFont">This text should use the custom serif font, in a custom color</p>
<p>When I uncomment the link line inside the head tag of the html file, the
font works. I don't understand why it doesn't work from the style sheet.
I know it's using the style sheet because I get the custom colors.
</p>
</body>
</html>
Here's my .css file:
#font-face {
font-family: Metamorphous;
// I have tried it both with and without the format specifier.
src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}
.customFont {
font-family: Metamorphous, Sans-Serif;
background-color: #294575;
color: #6291D8;
}
body {
font-family: Sans-Serif;
font-size: 24px;
}
I think you might have implemented it the wrong way in your stylesheet. Try replacing
#font-face {
font-family: Metamorphous;
// I have tried it both with and without the format specifier.
src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}
with
#import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
h1 {
font-family: 'Metamorphous', cursive;
}
That seems to work
#import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
h1 {
font-family: 'Metamorphous', cursive;
}
<h1> Test </h1>
#font-face is used to import your self designed font.
But Metamorphous is a web-safe font and it can be imported by using methods the other guy said already.
My problem was that I misunderstood the meaning of the url() function. I thought it was for a URL to a resource on the web, but it's actually for a path to a local file. It turns out that font-face is actually meant for fonts installed on the server, rather than accessed through a URL. People have been telling me it's for "self designed fonts." This includes, but is not limited to, fonts you designed. I didn't design the font, but I downloaded it to my development environment, and set the font-face url to the relative path to that file (relative to the .css file) and it started working. I don't know why they call it the url function, but the alternative, local(), is apparently for fonts installed in the local computer. Thank you to the two people who answered. Their answers guided me to this solution.
Related
i have an html website, i am trying to change the fontfamily of a heading, i loaded the font file which is in my server and did the following code:
font-family: 'Berton Voyage Regular',sans-serif"
<link rel="stylesheet" href="http://molugu.com/yantraev/BERTON-VOYAGE-TRIAL.TTF">
but still the font family is not changing, can anyone please tell me how to change the font family, thanks in advance
You need to specify the font / url within the stylesheet, not try to link it as a stylesheet itself.
For example:
stylesheet.css
#font-face {
font-family: BertonVoyageRegular;
src: url(http://molugu.com/yantraev/BERTON-VOYAGE-TRIAL.TTF);
}
body {
font-family: 'BertonVoyageRegular',sans-serif;
}
I downloaded a font, the location of the file is correct but i dont know why it's not working:
<style>
#font-face {
font-family:"myfont";
src: url('fonts/Helvetica85Heavy_22449.ttf');
}
h1 { font-family: "myfont" !important }
</style>
<h1> Some text </h1>
Somehow the font is not being displayed. Any idea why this could be happening?
You may need to use a web font kit to convert it. Try uploading it here first then replacing it in your font directory.
https://www.web-font-generator.com/
I created font face and applied it to the body:
#font-face {
font-family: 'Nosifer';
src: url('https://fonts.googleapis.com/css?family=Nosifer');
}
body { font-family: 'Nosifer' }
<body>
This is text.
</body>
However, the Nosifer font is not visible. What am I doing wrong?
Url to the fiddle: http://jsfiddle.net/9mr7973y/
Chrome gives the following warning in the console:
Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Nosifer
OTS parsing error: invalid version tag
The Google Fonts implementation guidelines for this font do not feature the use of #font-face. If you want to import it through CSS they advise using #import instead:
#import url('https://fonts.googleapis.com/css?family=Nosifer');
add this in html header
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
and apply font like
font-family: 'Nosifer', cursive;
I want add font from url to html with css . I use this html to advertising email template.
I'm adding font from url . but it's not working.
My simple code is :
<!DOCTYPE html>
<html>
<head>
<title>Start</title>
<style>
#font-face {
font-family: 'IRANSans';
src: url('http://dl.itunesmusic.ir/Font/IRANSans-Light.eot');
src: url('http://dl.itunesmusic.ir/Font/IRANSans-Light.eot?#iefix') format('embedded-opentype'),
url('http://dl.itunesmusic.ir/Font/IRANSans-Light.woff') format('woff'),
url('http://dl.itunesmusic.ir/Font/IRANSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
</style>
</head>
<body>
<div dir="rtl" align="center" style="color:#000;font-family:IRANSans, sans-serif;font-size:24px;line-height:36px;font-weight:400;">قیمت</div>
</body>
</html>
Using inline css not so good practice for web.
You can use external css using this file like that.
#import url('https://fonts.googleapis.com/css?family=Roboto');
Also you can generate any font from this site. https://www.fontsquirrel.com/tools/webfont-generator
Then follow the #DanielaB67 instruction.
Gmail removes the entire head portion of your email’s HTML. So, it will also remove any style elements. You need to inline your CSS and place the styles inside the body of your html.
unable to get css when sending email with css
If you cannot download the font and upload it to your host, try Google fonts instead. Hope you'll find something similar:
https://fonts.google.com/?subset=arabic
Otherwise, in order to make it work you must download the font, convert it for web and upload it to "fonts" folder in your host.
download the font from: http://dl.itunesmusic.ir/Font/IRANSans-Light.ttf
go to fontsquirel and convert it to webfont : https://www.fontsquirrel.com/tools/webfont-generator
you will get the fonts for webformat in a zip file and a stylesheet.css with the correct names and paths of the font. For example:
#font-face {
font-family: 'iransanslight';
src: url('iransans-light-webfont.woff2') format('woff2'),
url('iransans-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
copy and change the font path as you need for each format in your html style section, e.g.('http://www.yourwebsite.com/fonts/iransans-light-webfont.woff2...), and correct the font-family name: e.g. IRANSans to iransanslight. Use absolute path for the fonts: "http://www.yourwebsitename.com/fonts/...", otherwise the fonts will not be downloaded in emails.
upload the fonts to your host server and it should work.
I am testing html localy with notepad++ (not created a site yet) and I am trying to use a custom downloaded font. So, I have downloaded a ttf font and placed it under a folder that also contains the html file. Then I use
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url('C:\Users\Jon\Desktop\zz\clights.ttf') format('truetype');
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>Test123</div>
</body>
</html>
But that doesn't seem to work. I have viewed many answers but they all refer to adding a font to the contents of your site but I am testing html localy... How can I use a custom font this way? Ty
You don't need the entire filepath. Since its in the same folder, simply use url('zz/fontname.ttf)
Or if the ttf file is in the same directory as the index.html file, then drop the 'zz'