#font-face not loading custom font - html

I'm trying to use a custom font (.oft) that I have uploaded into my font folder in my filesystem.
I've declared the font in CSS with the following:
#font-face {
font-family: '400'; /*a name to be used later*/
src: url('../font/400ml-Regular.otf'); /*URL to font*/
}
and called it with :
.intro .slogan {
text-align: center;
font-family: '400';
}
My index.html page is in the root folder (var/www/html) and the css and font are in /var/www/html/css and /var/www/html/font respectively (so i think the '..' in the src is correct). I've also added the following to .htaccess
AddType font/otf .otf
but i'm still not even able to see it loading in developer tools.
Does anyone have any advice?

To make #font-face work across different browsers and OP you need to make it like this
#font-face {
font-family: '400';
src: url('400ml-Regular.eot'); /* IE9 Compat Modes */
src: url('400ml-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('400ml-Regular.woff') format('woff'), /* Modern Browsers */
url('400ml-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('400ml-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Use a fontface generator to make different font formats. Try fontsquirel or simillar :)

Related

Font support on IE 11

I have a problem with font on IE 11. Some of my element can't accept font-family. I had .woff and .woff2 but it's not accepting my fonts. How can I solve this?
Here's my CSS code:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot'); /* IE9 Compat Modes */
src: local('Roboto Thin'), local('Roboto-Thin'),
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff'), /* Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
And I'm using the font-family rule like below:
body {
font-family: Roboto;
}
Here is a result:
Your problem is you're assuming Roboto is a built-in web font, which it's not. You need quotation marks:
body {
font-family: 'Roboto';
}
Did you check the network tab in DevTools (F12)? You shouldn't have any 404 at load.
If you support IE10+ (IE9- isn't supported by MS itself), you only need WOFF2 and WOFF formats. SVG for example is for iOS3-4 or something like that…
You should first test with an uncommon font family name and super normal parameters (no italic, no thin or bold):
#font-face {
font-family: 'test';
font-style: normal;
font-weight: 400;
src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff') /* Modern Browsers */
;
}
body,
body * {
font-family: 'test' !important;
}
It allows you to test for correct path relative to your CSS (compiled CSS if you use Sass and _partials or LESS or PostCSS or Stylus!).
Then you can add font-weight: 100; to both your #-declaration and rules (and remove test bits like body * and !important :p) .
Then change the name of the font family.

How to use outside fonts in CSS

I have downloaded a folder full of svg and otf-files. They contain a font that I would like to use in my html-document. Here's what the folder looks like:
First question:
Which of the files should I use? I understand that "process.svg" and "process-yellow.svg" probably have different colors, BUT, when we have one "process-yellow.svg" and one "process-yellow.otf", which one should I use?
Second question:
How do I use the font in my HTML document? So far I've tried this:
In the html16.html style-element:
<style type="text/css">
#font-face {
font-family:'Process';
src: url('/fonts/process.svg#process') format('svg');
}
p.text1 {
width: 140px;
border: 1px solid black;
word-break: keep-all;
font-family: 'Process';
}
</style>
In the html16.html body-element:
<body>
<b>word-break:keep-all</b>
<p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
But it doesn't do anything to the font. It just looks like it would look without me changing the font.
EDIT: It should be added that importing woff-fonts works for me, like I did here:
#font-face {
font-family:Process;
src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff);
}
If web embedding is allowed. You can generate other font type files from here, which works for the older browsers.
#font-face {
font-family: 'Process';
src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */
src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/process.woff') format('woff'), /* Modern Browsers */
url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */
}
This should work. Please check with below syntax.
#font-face {
font-family: novalight;
src: url('/static/src/fonts/novalight.otf');
}
.proximanovalight {
font-family : novalight, sans-serif;
}
Try This - Import like so,
#import url('https://fonts.googleapis.com/css?family=El+Messiri');
Then use:
font-family: 'El Messiri', sans-serif;

How do I change the font-family of a <button> element?

This is my only CSS
#font-face {
font-family: 'thefont';
src: url('fonts/the-font.otf');
font-style: normal;
}
body {
font-family: 'thefont';
}
When I do a <button>Hi</button> the font ends up being -apple-system.
If I actually assign the font to button, it will make the font appear.
Does anyone know why it's not affecting the body and everything inside it?
In addition to the info below, to ensure your custom font is being taken into account for the button, you need to apply
button {
font-family : inherit;
font-size: 1em;
}
to all button elements.
You can inspect how they do it there:
http://purecss.io/buttons/
or there:
http://getbootstrap.com/css/#buttons
Also make sure that your font is exported in several different formats so that it is supported by all platforms.
You can use FontSquirrel Generator to export your font to all formats.
Your CSS should look a bit like that:
#font-face {
font-family: 'thefont';
src: url('the-font.eot'); /* IE9 Compat Modes */
src: url('the-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('the-font.woff2') format('woff2'), /* Super Modern Browsers */
url('the-font.woff') format('woff'), /* Pretty Modern Browsers */
url('the-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('the-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

CSS - Include multiple fonts in one CSS file

How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.
#font-face {
font-family: 'Inspira_Reg';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Bold';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Italic';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Medium';
src: url('http://myfonturl.com');
}
And then to use the font, I simply set the font-family property in the CSS IDs like so:
#titleSection {
margin: 25px 5px auto auto;
font-size: 11px;
text-align:left;
font-family: 'Inspira_Reg';
color: black;
}
But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.
I am using the latest version of Google Chrome and the font types I am using are TTF files.
Thanks, Dan.
The #font-face rule allows custom fonts to be loaded on a webpage.
Once added to a stylesheet, the rule instructs the browser to download
the font from where it is hosted, then display it as specified in the
CSS.
For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
An alternative to using this would be to use an import (which would need to be placed at the start of your css file)
Something like:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
which could then be used via:
font-family: 'Open Sans', sans-serif;
This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.
For many different fonts, and more information on using them, you could have a look here on google fonts
well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
</body>
</html>
so place your font the html folder and use the code :)

What is the best way to include custom font using CSS to make it compatible with maximum browsers?

I have tried various codes to embed custom font and finally following seems to work in FF & IE8 above. But it does not support in IE7.
#font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot?') format('eot'),
url('fonts/abc-font.woff') format('woff'),
url('fonts/abc-font.ttf') format('truetype');
}
h1, h2, h3, div span { font-family: 'xyzfont', Georgia, Arial; }
Any suggestion to make it more compatible (such as IE7) most welcome.
Here is the css i use to embed my font in every browser, hope that helps:
#font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
url('fonts/abc-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */
}
Also note, that you can set your font family without quote, like this:
h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }
You can learn about font browser support here.
fontsquirrel is probably the best place to generate every font format you need.
This article explain how to find your font ID to add after the hashtag for the SVG font.
If someone is asking why is there ?#iefix for IE6-IE8 browsers eot font, see this answer.
i use this code ;)
#font-face {
font-family: 'BBadr';
src: url('fonts/BBadr/BBadr.eot'); /* IE9 Compat Modes */
src: url('fonts/BBadr/BBadr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("fonts/BBadr/BBadr.otf") format("opentype"), /* Open Type Font */
url('fonts/BBadr/BBadr.woff') format('woff'),/* Pretty Modern Browsers */
url('fonts/BBadr/BBadr.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/BBadr/BBadr.ttf') format('truetype'),/* Safari, Android, iOS */
url('fonts/BBadr/BBadr.svg#BBadr') format('svg'); /* Legacy iOS */
}
you can convert Online youre font ( ttf ( with this website :
Simple Online Web Font Converter: ttf otf woff woff2 eot svg otf with css stylesheet
Convert font and use my css code ( not use the sample css of site )