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'
Related
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 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.
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.
So i wanted to add a custom font to my Html and CSS but i'm struggling to link the Html my font.
style type="text/css">
#font-face {
font-family: "Uni Sans";
src: local(unisans) format("woff");
}
p.unisans {
font-family: "Uni Sans", Verdana, Tahoma;
}
</style>
use Font Squirrel generator. But beware of the font license!
You cannot link a local font to your html or CSS. You need to convert the font you want to webfont, like Fontsquirrel. Download and unzip the files, place them into the folder of your html page or a new "fonts" folder located in the same folder as your html or CSS file. Then open the stylesheet.css that you get from Fontsquirrel, copy and paste the CSS of the font into your new css file and change the path of the font as you need.
Then use the font 'name' in your CSS wherever you need.
So I have a HTML page, linked to a CSS file which is supposed to change the font of a div class called header, to a custom font named KeepCalm. Here's the code for defining the font-face:
#font-face {
font-family: 'KeepCalm';
src: url('Files\Fonts\KeepCalm.eot?') format('eot'), url('Files\Fonts\KeepCalm.woff') format('woff'), url('Files\Fonts\KeepCalm.ttf') format('truetype');
}
Here is the code to change the font-face of the header div class:
.header {
font-family: KeepCalm;
}
However the fonts are not showing up in any browser I try, chrome, firefox or IE. I have already looked up how to fix it and have not yet found a solution.
Here is the link to the font I'm using: Here.
Supposing that your folders are like this:
|-- index.html
|--|Files
|--|Fonts
|-- KeepCalm-Medium.eot (Created by http://transfonter.org/)
|-- KeepCalm-Medium.woff (Created by http://transfonter.org/)
|-- KeepCalm-Medium.woff2 (Created by http://transfonter.org/)
|-- KeepCalm-Medium.ttf (Original File)
I created this html code:
<html>
<head>
<meta charset="utf-8">
<title>Stack Overflow Test</title>
<style type="text/css" media="screen">
#font-face {
font-family: 'KeepCalm';
src:
url('Files/Fonts/KeepCalm-Medium.eot?') format('embedded-opentype'),
url('Files/Fonts/KeepCalm-Medium.woff') format('woff'),
url('Files/Fonts/KeepCalm-Medium.woff2') format('woff2'),
url('Files/Fonts/KeepCalm-Medium.ttf') format('truetype');
}
.header {
font-family: KeepCalm;
}
</style>
</head>
<body>
<div class="header">
Keep Calm
</div>
</body>
</html>
And it works. If you have the same folders that supposed and named correct the font files it will work. And you do not need a webserver. Simple html, and works.
First your src is not formatted right try to change it like this:
src: url('/Files/Fonts/KeepCalm.eot?')
Note: always practice to use relative paths.
It turns out that I was using the "Files\Fonts\" as the path of the font, although since it was the css file I was using, it was already in the "Files" folder so I just needed it to change to "Fonts\KeepCalm.tff". Stupid mistake but it's easy to miss.