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.
Related
I'm trying to load some custom fonts, but for some reason, only one weight is loaded on the front-end. I have checked in the devtools.
Here's my CSS:
/* FONTS */
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot'); /* IE9 Compat Modes */
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff'), /* Modern Browsers */
font-weight: 400;
}
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2'); /* IE9 Compat Modes */
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff'), /* Modern Browsers */
font-weight: 600;
}
You can check it here that there are some text which tries to use the CalibreWeb font-family with a font-weight of 400 (e.g. the subheading after Advice Hub.)
Any idea what could be the issue?
It appears there is an error in your CSS syntax, causing some of the fonts to not be loaded.
To fix the syntax, use a semicolon on the second line of the second src value.
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
font-weight: 400;
}
#font-face {
font-family: 'CalibreWeb';
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
font-weight: 600;
}
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 */
}
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 :)
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 :)
I was using the Open Sans Font-Family from the Google Fonts Library, where you can just use this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
And it will export all the fonts at once and when you are using Open Sans as Font-Family you can simply put font-weight: XXX and it will automatically use the right font for it.
I downloaded the files directly because we have to use them local now, but it gives me like 10 different fonts for each style and weight (normal, medium, bold, bold italic e.g). I don't want to import them separately and use font-family: Open-Sans-Bold (for example)
Is there any way to import them all at once or tell CSS that it's basically the same Font-Family just a different weight?
(Please excuse my example of Comic Sans neue, just something I had laying about)
You have to add them all separate, look at the following code. Each one has a different 'font-weight' and has a new font file (light, regular and bold).
Each font file has a different font-size which means that if you want to add all of them, you'll have to add them all this way (for each one you want).
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Light.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Light.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Light.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 100;
}
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 300;
}
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 700;
}
Calling it is simple after, in your CSS:
p {
font-family: 'Comic Neue', sans-serif;
font-weight: 300; /*or 100/700*/
}
Obviously, you'd replace this with Open Sans and the Open Sans font files.