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.
Related
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.
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.
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'
I have a folder with 2 custom fonts in a folder that I named Fonts and one of them is called PlayfairDisplay-Black. I do not know how to use them in the site that I am developing?
How can use these fonts?
A special CSS #font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.
#font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
All you have to do is link to the stylesheet in your HTML, like this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original #font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
p { font-family: 'MyWebFont', Arial, sans-serif; }
Try this in your css:
#font-face {
font-family: 'MyFairFont'; /*to use later*/
src: url('http://exampledomain.com/fonts/PlayfairDisplay-Black.ttf'); /*URL to the font*/
}
Then to use the font on a specific element:
.myclassname {
font-family: 'MyFairFont';
}
You have to do link to the fonts style in your HTML, like this:
<link rel="stylesheet" href="fonts/fonts.css" type="text/css" />
Attach fonts file using generate font-face from third party application like fontsquirrel.com or transfonter.org then add in your css fonts like
#font-face {
font-family: 'open_sansregular';
src: url('fonts/opensans-regular-webfont.eot');
src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans-regular-webfont.woff') format('woff'),
url('fonts/opensans-regular-webfont.ttf') format('truetype'),
url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
p { font-family: 'open_sansregular'; }
NOTE:
this is based on a webfont pattern that no longer applies. eot is not used except by IE8, svg is a format that is literally no longer maintained, and has actively been removed by most major browsers, and WOFF is a byte-for-byte wrapper around ttf and otf sources, with every browser that supports ttf/otf also supporting WOFF, so there is no point in loading both. For modern browsers, load WOFF (and WOFF2 if you need it, but it's still not well supported), and if you need IE8- support, add eot, and that's the only two you need.Here I attach other files only for knowledge.
You can achieve what you want easily in https://www.fontsquirrel.com/tools/webfont-generator or https://www.web-font-generator.com/ There you can upload your fonts and get the font in the formats needed to make it work in the majority of browsers and the css calling those fonts. Upload the fonts to your project, include the css snippet they provide you, link your fonts properly and there you go.
Currently I'm working on embedding a new font into my page (currently offline). I converted the font into all types with Font Squirrel and added them to the Code of fontspring.
Now I would like to order my folders into subfolders so I created a root folder (only the HTMLfile), a CSS Folder and a Font Folder. The Font-Face is embedded in the CSS and try to reach the Fonts out of the Font Folder, but it doesn't work. It just works when I put the CSS, HTML and all the Fonts right into the root Folder. Why? I allready used the relative path method (../font/thefontiwanttouse.ttf). Is there no way to subfolder my Fonts and CSS and still use Fontface? I allready searched the Web but I didn't find anything.
Code in CSS:
body, button, input, select, textarea { font-family: regular, sans-serif; color: #222; }
Code Fontfamily
#font-face {
font-family: 'regular';
src: url('../font/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/pfdindisplaypro-reg-webfont.woff') format('woff'),
url('../font/pfdindisplaypro-reg-webfont.ttf') format('truetype'),
url('../font/pfdindisplaypro-reg-webfont.svg#svgFontName') format('svg');}
Greetings
Terba.
The Stylesheets needs to be on the absolute path between your font and the HTML File:
HTML-File: domain.tld/index.html
CSS-File : domain.tld/assets/stylesheets/stylesheet.css
FONT-File: domain.tld/assets/stylesheets/font/pfdindisplaypro-reg-webfont.woff
and then update your Stylesheet to:
Try to put the folder with the fonts inside the folder with your css file!
#font-face {
font-family: 'regular';
src: url('font/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('font/pfdindisplaypro-reg-webfont.woff') format('woff'),
url('font/pfdindisplaypro-reg-webfont.ttf') format('truetype'),
url('font/pfdindisplaypro-reg-webfont.svg#svgFontName') format('svg');}
The solution is to put a css file within the folder that the font file is stored in, like this
[your directory]/font/OpenSans/OpenSans.css
In that stylesheet, which is in the exact same place as the font you are referencing, the only content should be
#font-face {font-family: 'Open Sans';
src: url('OpenSans-Regular.ttf');}
In the head of each page, link to that stylesheet as you would any other
<link href='assets/font/OpenSans/OpenSans.css' rel='stylesheet' type='text/css'>
Now you can use this font in any stylesheet used on the page with
font-family:'Open Sans';