In my HTML:
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="add_ons/style_sheets/style.css" />
</head>
<body>
<div id="header">
<p id ="text" >BALL</p>
</div>
<body>
In the css I've tried:
#font-face {
font-family: 'Pier';
src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
src: url('add_ons/sources/fonts/Pier.woff') format('woff');
src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}
#text{
font-family: 'Pier';
}
And it did not work, I've also tried to remove the format('truetype') part and to use src: url('Path'), url('Path'), url('Path') but that has not worked either.
Can somebody explain me how to properly insert my custom font into a webpage?
P.S.: My webpage isn't currently on any server I'm just opening the html file from my computer on chrome 47.0, could that be the cause?
Best practices is to always use a relative paths not absolute ones, to ensure it works for any domain.
From your code, I'm assuming you are having the following structure:
Root
index.html
add_ons
style_sheets
style.css
sources
fonts
Pier.woff2
Pier.woff
Pier.ttf
You could simply update your paths in the CSS from:
#font-face {
font-family: 'Pier';
src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
src: url('add_ons/sources/fonts/Pier.woff') format('woff');
src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}
To:
#font-face {
font-family: 'Pier';
src: url('../sources/fonts/Pier.woff2') format('woff2');
src: url('../sources/fonts/Pier.woff') format('woff');
src: url('../sources/fonts/Pier.ttf') format('truetype');
}
I found out the answer!
When you say url() css expects a full url and not a relative one.
So:I was using a Path relative to my index.html instead of a full complete path so src: url('website/add_ons/sources/fonts/regular/Pier.woff2');
You should use src: url('C:/Users/Admin/Desktop/website/add_ons/sources/fonts/regular/Pier.woff2');
If you were using a website you should use the full path too iehttp://www.web.com/fonts/font.ttf
Related
I've got a woff file named 'azonix-webfont.woff'. I added it to my website using #font-face. but it's not working. The text is displayed with the default font. Where's the error?
<head>
<meta charset="UTF-8">
<style>
#font-face
{
font-family: Azonix;
src: url(azonix-webfont.woff);
}
</style>
</head>
<body>
<p style="font-family: Azonix;">Hello!</p>
</body>
The text is displayed in default font. I don't know where's the error.
Edit: OK, I found the answer. It started working when I posted the files to the server.
You should upload your font to transfonter.org and convert. Will come css code with transfonter zip folder. And then you should change font url in css, according to place of your font files. Like this:
#font-face {
font-family: 'Proxima Nova Cn Lt';
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot');
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff2') format('woff2'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff') format('woff'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
I have a font file that I want to use called Gotham Light Regular. How would you access that file to change the font? Below is what I have now, but it isn't working.
.name{
font-family: myFirstFont;
}
<style>
#font-face {
font-family: myFirstFont;
src: url(fonts/Gotham Light Regular/Gotham Light Regular.otf);
}
</style>
<div class= "name">
<h1>Hello</h1>
<h2>Bye</h2>
</div>
Put font files to web accessible location and put proper CSS for it.
You can download this font from internet (e.g. cufonfonts) or find your font files on computer (example).
Then put CSS:
#font-face {
font-family: 'GothamLight';
src: url('/fonts/Gotham-Light.eot');
src: url('/fonts/Gotham-Light.otf') format('opentype'),
url('/fonts/Gotham-Light.eot?iefix') format('embedded-opentype'),
url('/fonts/Gotham-Light.woff') format('woff'),
url('/fonts/Gotham-Light.ttf') format('truetype'),
url('/fonts/Gotham-Light.svg#gothamlight') format('svg');
}
body {
font-family: GothamLight;
}
I am making a basic informational website. In my CSS file I have the following:
#font-face {
font-family: "Nilland";
src: local('Nilland.ttf');
}
body{
background: #FFF;
font-size:14px;
font-family: Nilland;
}
The .ttf file is in the same directory as the index.html file. Why is this not working?
You need to include all types of your font instead of only .ttf, should be something like:
#font-face {
font-family: 'Nilland';
src: url('Nilland.eot');
src: url('Nilland.eot?#iefix') format('embedded-opentype'),
url('Nilland.woff') format('woff'),
url('Nilland.ttf') format('truetype'),
url('Nilland.svg#Nilland') format('svg');
}
Put the ttf files in the folder where the css file is.
The path in the css file is relative to the css-file, not the html file
Try specifying the complete path
#Felix is right although; try separate block for normal and bold font. Use svg and other formats for multiple browser compatibility and path may be issue not to work.
#font-face {
font-family: 'Nilland';
src: url('../fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
src: url('../fonts/Nilland.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Nilland";
src: url("../fonts/Nilland.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
I created a webpage with the custom font, I can see the fonts applied in the browser but its not applied in the printed page.
I followed the below way for printing :
The fonttest.css file contains the following content :
#font-face {
font-family: "myriad";
src: url("../fonts/myriad.otf") format('truetype');
}
#font-face {
font-family: "serifa-bold";
src: url("../fonts/serifa_bold.ttf") format('truetype');
}
#font-face {
font-family: "serifa";
src: url("../fonts/serifa.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF";
src: url("../fonts/AlexandriaFLF.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Bold";
src: url("../fonts/AlexandriaFLF-Bold.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-BoldItalic";
src: url("../fonts/AlexandriaFLF-BoldItalic.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Italic";
src: url("../fonts/AlexandriaFLF-Italic.ttf") format('truetype');
}
In the HTML file the CSS file is linked as below :
<link rel='stylesheet' type='text/css' media='all' href='resource/css/fonttest.css' />
I was printing the following below lines :
<p style="font-family:myriad;color:#000000">myriad-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa-bold;color:#000000">serifa-bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa;color:#000000">serifa-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF;color:#000000">AlexandriaFLF-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Italic;color:#000000">AlexandriaFLF-Italic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Bold;color:#000000">AlexandriaFLF-Bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-BoldItalic;color:#000000">AlexandriaFLF-BoldItalic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
please help me ?
Try to put your stylesheet media attribute to print :
<link rel='stylesheet' type='text/css' media='print' href='resource/css/fonttest.css' />
If you don't find a way to do this, there is an alternative.
You could use wkhtml2pdf and make a printable PDF file.
Maybe you may need to include more fonts formats in your css.
Something like this:
#font-face {
font-family: 'XXXXX';
src: url('XXXXX.eot');
src: url('XXXXX.eot?#iefix') format('embedded-opentype'),
url('XXXXX.woff') format('woff'),
url('XXXXX.ttf') format('truetype'),
url('XXXXX.svg#XXXXX') format('svg');
font-weight: normal;
font-style: normal;
}
the url https://bugzilla.mozilla.org/show_bug.cgi?id=468568 which explains why print is not working for custom fonts, so I tested in firefox-20.0a1.en-US.win32.installer.exe. The fonts with ttf and otf are applied exactly as it should be.
I downloaded some otf fonts and then converted them to eot using: https://onlinefontconverter.com but when I view the site in IE8, the fonts do not show (they show in Chrome, Firefox, Opera, Android). Something must be wrong with either my code or the eot. Does anyone know what's wrong?
(Download Roboto here: http://www.fontsquirrel.com/fonts/roboto )
(Convert it here: https://onlinefontconverter.com )
STYLES.CSS
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.eot");
}
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.ttf");
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
index.html (relevant code)
<div class="myDiv">Some font in here that shows incorrectly as Arial!</div>
The stylesheet and font are in the same folder.
Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.
Try this
#font-face
{
font-family: 'RobotoCondensed';
src: url('Roboto-Condensed.eot');
src: url('Roboto-Condensed.eot?#iefix') format('embedded-opentype'),
url('Roboto-Condensed.woff') format('woff'),
url('Roboto-Condensed.ttf') format('truetype'),
url('Roboto-Condensed.svg#') format('svg');
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
I had a problem and no amount of tweaking and web research helped
Until I edited head tag to include meta
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
</head>
The meta tag solved problem and every variation worked!
Variation 1
<style type="text/css">
#font-face
{
font-family: 'SolaimanLipi';
src: url('SolaimanLipi.eot');
src: local('SolaimanLipi'),url('SolaimanLipi.ttf') format('truetype');
}
#font-face
{
font-family: 'Yogesh';
src: url('CDACOTYGN.eot');
src: url('CDACOTYGN.ttf') format('truetype');
}
</style>
Variation 2
<style type="text/css">
#font-face{
font-family: 'solaimanlipi';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont?#iefix') format('embedded-opentype'),
url('solaimanlipi-webfont.woff') format('woff'),
url('solaimanlipi-webfont.ttf') format('truetype'),
url('solaimanlipi-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'cdacotygn';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont.eot?#iefix') format('embedded-opentype'),
url('cdacotygn-webfont.woff') format('woff'),
url('cdacotygn-webfont.ttf') format('truetype'),
url('cdacotygn-webfont.svg#svgFontName') format('svg');
}
</style>
We think complex but often needle in haystack is elsewhere head meta tags
You may try and view source
http://www.weloveseppa.com/jnc/jncTryBangla.html
http://www.weloveseppa.com/jnc/try1/jncTryBangla.html
Works in all the browsers including the old IE8
Try
font-family: "RobotoCondensed", Arial, Helvetica;
The quotes should force it as your primary option