How to install custom fonts in css - html

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.

Related

Custom fonts not displayed in Internet Explorer

My website uses custom fonts. They work on all browsers, except Internet Explorer (version 11.0.9600).
The CSS code:
#font-face {
font-family: 'almoni-dl';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'),
url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.woff') format('woff'),
url('https://assets.mywebsite.com/fonts/almoni-dl-aaa-700.ttf') format('truetype');
}
html {
font-family: 'almoni-dl','Trebuchet MS',Helvetica,sans-serif;
}
What I've tried so far:
The fonts use an absolute path to a sub-domain. The response for these fonts includes the header Access-Control-Allow-Origin:*. I also tried using a relative path, no luck.
The fonts themselves are downloaded correctly, returning code 200.
Cache was cleared several times.
The fonts' Content-Types are: woff = application/font-woff; ttf = application/octet-stream; eot = application/vnd.ms-fontobject.
Other websites (such as www.newyorker.com) display custom fonts correctly on the same browser.
I also tried the following syntax:
#font-face {
font-family: 'almoni-dl';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.eot');
src: url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'),
url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.woff') format('woff'),
url('https://assets.kalir.co.il/fonts/almoni-dl-aaa-700.ttf') format('truetype');
}
What else could be wrong?
In the font-family property in css, try typing the actual full name of the font, if that doesn't work, try using the full filename (minus the extension) as the font-family.
IE has known issues finding the font if the font-family name is different than what it expects!

font-family crash with #font-face src

Good day,
I have a css, code is as follow:
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
}
body {
font-family: 'dax-regularregular';
}
And, in my html code, I simply code:
<b>this is bold</b> + this is normal
And this is display correctly in chrome, but not in IE (All become normal, not bold).
If I remove the body{} in my css file, then IE will working fine.
If I remove either font-family or src inside #font-face, then IE will working fine.
I do some research on internet, found that .eot file will not support for chrome, that's why chrome wont affected and display correctly. (Not sure my understanding is correct or not)
Kindly advise. And suggest your solution if you have.
** Edit **
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxregular-webfont.woff') format('woff'),
url('../fonts/daxregular-webfont.ttf') format('truetype'),
url('../fonts/daxregular-webfont.svg#dax-regularregular') format('svg'),
url('../fonts/daxbold-webfont.eot');
font-weight: normal;
font-style: normal;
}
** Edit version 2 **
This solution can fix IE 9, IE 10, and IE 11 issue. But,
This solution introduce new issue to IE 8, which is , normal word will be bold, and the bold word will become "more bold" ( become fatter ). I saw from internet, IE 8 is not support the #font-face rule with the WOFF format (only support for EOT format). So, i take out those url except eot, but still facing the problem.
I change my css code to as follow, but still same hit issue in IE 8:
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxbold-webfont.eot');
src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
font-weight: bold;
font-style: normal;
}
As your code shows that you have included only .eot format webfont in body in css. The .eot format will work only on IE.
Now since you have added only url('../fonts/daxregular-webfont.eot') [notice 'regular'], the IE browser showing your text in regular or not-in-bold format. So if you want to display your text in-bold format on IE, you would need to add an additional url('../fonts/daxbold-webfont.eot') [notice 'bold'] definition in your css and also the relevant font in your font folder.
Now, why chrome displays it properly? I doubt if chrome would be showing your text in your desired font i.e. dax or .eot. Since you have not defined .woff font in your css (which chrome normally requires), most probably using some other font defined in some other css on your page.
To display your page consistently across all browsers using for custom font you would need to add all fonts definition in your css including adding the same in your font folder -
`#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxregular-webfont.woff2') format('woff2'),
url('../fonts/daxregular-webfont.woff') format('woff'),
url('../fonts/daxregular-webfont.ttf') format('truetype'),
url('../fonts/daxregular-webfont.svg#svgFontName') format('svg');
}`
UPDATE:
First, other then font definition mentioned above you'll also have to add other font formats definitions in your css like
for bold,
#font-face {
font-family: 'dax-bold';
src: url('../fonts/daxbold-webfont.eot');
src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxbold-webfont.woff2') format('woff2'),
url('../fonts/daxbold-webfont.woff') format('woff'),
url('../fonts/daxbold-webfont.ttf') format('truetype'),
url('../fonts/daxbold-webfont.svg#svgFontName') format('svg');
}
for semibold,
#font-face {
font-family: 'dax-semibold';
src: url('../fonts/daxsemibold-webfont.eot');
src: url('../fonts/daxsemibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daxsemibold-webfont.woff2') format('woff2'),
url('../fonts/daxsemibold-webfont.woff') format('woff'),
url('../fonts/daxsemibold-webfont.ttf') format('truetype'),
url('../fonts/daxsemibold-webfont.svg#svgFontName') format('svg');
}
and so on including relevant fonts in font folder, whichever you need.
Second, for getting these fonts. Not sure but I think your dax font seems a licensed font and not the free one. If yes, then you can convert all above mentioned formats using the ttf / otf font which would have been installed in your system's 'Font' folder. To convert just copy the 'regular' or 'bold' font from that font folder on your desktop and then convert it using website like 'Font Squirrel'
UPDATE 2
The IE needs .eot version web-font only, having .woff won't affect text in any IE version. So don't fear of .woff.
You need to correct your font definition, which is still incorrect in your last post -
for regular or unbold font,
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot');
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype');
}
for bold format font,
#font-face {
font-family: 'dax-bold';
src: url('../fonts/daxbold-webfont.eot');
src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
}
Your html should look like this -
<p style="font-family: 'dax-regularregular';"><span style="font-family: 'dax-bold';">bold text lying here</span> unbold text lying here</p>
It should work proper across.
Note: Have shown applying font in inline tag to demonstrate html structure, please use your class for the same.
Try adding different types of fonts and specifying there type as well..
#font-face {
font-family: 'dax-regularregular';
src: url('../fonts/daxregular-webfont.eot'); /* IE9 Compat Modes */
src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/daxregular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/daxregular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/daxregular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/daxregular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Add more font file like
font-family: 'dax-regularregular';
src: url('dax-regularregular.eot');
src: url('dax-regularregular.eot?#iefix') format('embedded-opentype'),
url('dax-regularregular.woff') format('woff'),
url('dax-regularregular.ttf') format('truetype'),
url('dax-regularregular.svg#open_sansregular') format('svg');
Generate your font blow link
http://www.fontsquirrel.com/tools/webfont-generator

Font loading OK in Safari but not Chrome or Firefox (all on Mac)

OK, I have reached the pulling my hair out stage.
I have created the below simple example. Basically Safari displays both fonts correctly, yet both Chrome and Firefox will not display the Helvetica font. Both fonts reside in the same folder, along with this test HTML. Anyone any ideas? - I have tried Helvetica Heavy Condensed from two sources, both same effect. See images.
<head>
<style>
#font-face
{
font-family: "HelvHvCn";
src: url('HelvHvCn.ttf') format('truetype');
}
#font-face
{
font-family: "BebasNeue";
src: url('BebasNeue-webfont.ttf') format('truetype');
}
h1
{
font-family: HelvHvCn;
}
h2
{
font-family: BebasNeue;
}
</style>
</head>
<body>
<h1>This font only works in Safari</h1>
<h2>This font works in Safari, Chrome and Firefox</h2>
</body>
Webfont implementations are a bit screwy, so you need to use a carefully phrased #font-face declaration to get it rendering reliably xbrowser.
Providing you have the license to use it as a webfont, run the TTF through a service like http://www.fontsquirrel.com/ to generate the eot, woff and svg webfonts, then try this syntax in your CSS...
#font-face {
font-family: 'your-custom-font';
src: url('your-custom-font.eot');
src: url('your-custom-font.eot?#iefix') format('embedded-opentype'),
url('your-custom-font.woff') format('woff'),
url('your-custom-font.ttf') format('truetype'),
url('your-custom-font.svg#your-custom-font') format('svg');
}
body {
font-family: 'your-custom-font', sans-serif;
}
Its probably also worth noting that woff files occasionally look fine on Mac Chrome, and pretty gash on Win Chrome. You may want to mess about with -webkit-font-smoothing: antialiased; and in some edgecases tweak the font order, or even ditch the woff altogether.

Why Can I Not Implement #font-face?

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

#font-face does not work while fonts in subfolder

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