Why Can I Not Implement #font-face? - html

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

Related

Import local fonts from relative path in HTML file are not working

I'm trying to import local fonts from a folder from relative path in my index.html instead of cdn url but its not working out. I have tried following
<link rel="stylesheet" href="assets/style/Material-Icons.woff2" as="font" cross-origin />
In the browser the fonts are loaded as i see them in the network tab with no error in loading. Also i am avoiding #font-face. Please guide me. Basically i am trying to replace following code:
#font-face {
font-family: "Material Icons";
font-style: normal;
font-weight:400
src: url ("assets/style/Material-Icons.woff2")
}
Make sure your font file is included in the project.
Also, try to specify the format like this -
#font-face {
font-family: "MaterialIcons"; // Removing space
font-style: normal;
font-weight: normal;
src: url("./assets/style/Material-Icons.woff2") format("woff2");
}
And use font-family: 'MaterialIcons' with these other font styles specified here. It should work.

Adding custom fonts in CSS

I am just starting out with HTML, CSS and co. and for the last hour or so I've tried implementing a custom font to my project. I've tried everything, creating a fonts folder or putting the font files in the same directory as my index.html file, but nothing is working!
I am grateful for every help, solving this problem! :)
my directory and css code below
font-family: league_spartanregular;
src: url('leaguespartan-bold-webfont.eot');
src: url('leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('leaguespartan-bold-webfont.woff2') format('woff2'),
url('leaguespartan-bold-webfont.ttf') format('truetype'),
url('leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
background-color: #f4f4f4
}
#main-header{
text-align: center;
font-family: league_spartanregular;
font-size: 80px;
}
p{
font-family: league_spartanregular;
}
Check out Google Fonts! :)
simply search for your font and upon clicking one, there will be a tab at the bottom. Click on that and there will be a link which you can include in your HTML above your stylesheet link.
https://fonts.google.com/
I'm also somewhat new here so apologies if my answer isn't satisfactory.
Cheers :)
Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css folder - it would work.
If you want to go back in folder structure just use ../. It's useful if you want to store images for example in /img and not in /css/img.
#font-face{
font-family: league_spartanregular;
src: url('../fonts/leaguespartan-bold-webfont.eot');
src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
If this css is from a .css file in the css/ folder, you'll need to add ../ to your filepaths, eg:
#font-face {
font-family: league_spartanregular;
src: url('../leaguespartan-bold-webfont.eot');
src: url('../leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../leaguespartan-bold-webfont.woff2') format('woff2'),
url('../leaguespartan-bold-webfont.ttf') format('truetype'),
url('../leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
Otherwise, if you open the inspector in your browser, you should able to see the errors associated with it trying (and failing) to find these files with red 404 messages.
first go to google.fonts select one fonts,there you finds two things one is link in tag which you put in tag of your html file and second thing is font-family of CSS which you use in your css file
here is google font links

relative file path to fonts in css file

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.

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

#Font-face not working?

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.