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';
Related
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 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.
I have a stylesheet that is referenced in the header:
<link href="./css/stylesheet.css" rel="stylesheet">
All of the css works in it except this specific code:
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hsw0h3');
src: url('fonts/icomoon.eot?hsw0h3#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hsw0h3') format('truetype'),
url('fonts/icomoon.woff?hsw0h3') format('woff'),
url('fonts/icomoon.svg?hsw0h3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
When I put the above #font-face CSS in the page above where the icons are being shown it works but when I put it in the CSS file it stops working. I finally found out that this was likely due to the file path not being correct.
Here is the file structure:
Looking at this article (https://css-tricks.com/quick-reminder-about-file-paths/) it looks like I should either use:
url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')
to go back to the root and then into the fonts folder. But the icon still is not rendering from the CSS file.
What am I doing wrong and how do I fix it?
URLs in CSS files are relative to the CSS file.
url('fonts/icomoon.eot?hsw0h3'); means http://example.com/css/fonts/icomoon.eot?hsw0h3, but your screenshot of your directory structure shows you need http://example.com/fonts/icomoon.eot?hsw0h3.
Add ../ or /
../ need to be added before the path to move up one folder in hierarchy (../../path) to move two folders up in hierarchy
Consider describing the font sources individually without any version specification (I guess) like,
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
src: url('fonts/icomoon.eot') format('embedded-opentype');
src: url('fonts/icomoon.ttf') format('truetype');
src: url('fonts/icomoon.woff') format('woff');
src: url('fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Alternatively, you may also remove the format specification and let the browser to determine automatically, if problem still persists.
My problem is that custom fonts do not display when using #font-face.
My CSS is referenced in it's own file and the code is:
#font-face {
font-family: 'MerceariaAntique';
src: url('type/mercearia_new/21319b_0_0-mercearia.eot');
src: url('type/mercearia_new/21319b_0_0-mercearia.eot?#iefix') format('embedded- opentype'),
url('type/mercearia_new/21319b_0_0-mercearia.woff') format('woff'),
url('type/mercearia_new/21319b_0_0-mercearia.ttf') format('truetype'),
url('type/mercearia_new/21319b_0_0-mercearia.svg#webfontuploaded_file') format('svg');
font-weight: normal;
font-style: normal;
}
In my HTML file I have referenced it as the following alongside the main CSS file:
<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css" />
I suspect I have referenced it incorrectly, but I can't find out how to reference it correctly.
what is your folder structure??
if you calling css inside a folder "css" you must point out the correct path to custom fonts
like this "../"
src: url('../type/mercearia_new/21319b_0_0-mercearia.eot');
Here's an example of how to use #font-face:
#font-face {
font-family: "Example Font";
src: url("http://www.example.com/fonts/example");
}
h1 {
font-family: "Example Font", sans-serif;
}
I assume you have already checked e paths of the font files and they are correct.
I also assume you have checked your Error Console for any CSS warnings or errors like file not found.
Try double checking where you are assigning the font as a font-family in your code.
Also, a font-face reference: http://reference.sitepoint.com/css/at-fontface
UPDATE: Try WebFont Loader from Google
Im having trouble trying to get the font-face style working locally. I know it should work locally as the folder I downloaded from font-squirrel renders correctly.
Ive copy and pasted everything exactly into the same folder structure supplied by fontsquirrel...
CSS
#font-face {
font-family: 'URWClassicoItalic';
src: url('urw_classico_italic-webfont.eot');
src: url('urw_classico_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('urw_classico_italic-webfont.woff') format('woff'),
url('urw_classico_italic-webfont.ttf') format('truetype'),
url('urw_classico_italic-webfont.svg#URWClassicoItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#primary-navigation {font-family: 'URWClassicoItalic'; font-size:2em}
HTML
<div id="primary-navigation">TEST</div>
My font files are all in the root, same directory as my index file.
Any help would be brilliant, thankyou
#font-face urls that are specified in a separate CSS file must have a url relative to this CSS
for example:
src: url('../urw_classico_italic-webfont.eot');
if the CSS-file is one level above the folder, where the font-file is stored.