CSS How to embed several Font-Weights at once - html

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.

Related

CSS #font-face does not work with multiple font weights

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

Using #font-face results in text having height of 0 on Mac

I have a website with a custom font (Gotham Book). All containers like this:
<span>TEXT IN GOTHAM </span>
Get height of 0 on Mac (Chrome and Safari, not on Chrome for Win). Same containers work fine with other fonts like Arial, or Roboto or whatever.
The font is in the CSS like this:
#font-face {
font-family: 'Gotham Book';
src: url("/assets/fonts/GothamBook.ttf")
}
Do i have to specify something else?
I think your font was not getting loaded for some reason and you need to debug that on mac (you should check your console for any error)
I would suggest to link all font file format which you have got with that font
, see below code for example
#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 */
}
I also suggest to add fallback font as if your font was not loaded it will take other font
font-family: 'MyWebFont', Arial, sans-serif;

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.

Not displaying font on mac safari when added custom font-family and apply to body

View on Mac Safari:
View on Windows Chrome:
Here is the css stye
#font-face {
font-family: Gotham HTF Light;
src: url(gothamlight.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");}
#font-face {
font-family: Gotham HTF Book;
src: url(gothambook.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");
}
#font-face {
font-family: Gotham HTF Medium;
src: url(gothammedium.ttf) format("truetype");
src: url(gotham-black.otf) format("otf");
}
html, body {
text-rendering: optimizeLegibility;
}
body{
font-weight:normal;
}
*{
font-family:'Gotham HTF Light';
font-weight: normal;
font-style: normal;
}
input, select, textarea, button,label{
font-family:inherit;
}
How can resolve this problem if I removed the font-family:'Gotham HTF
Light'; then its working fine but whe I apply custom font it dont work
on form fields.
I had this problem and turns out the .ttf file that I was using was defective. I did not realize that right away, because in chrome worked.
To solve the problem I just downloaded other .ttf file (that worked on Safari).
User all font format to support all browse and safari too, Try This
#font-face {
font-family: 'Gotham HTF Light';
src: url((gothammedium.eot);/* IE9 Compat Modes */
src: url((gothammedium.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */
url(gothammedium.woff2) format('woff2'), /* Super Modern Browsers */
url(gothammedium.woff) format('woff'), /* Pretty Modern Browsers */
url(gothammedium.ttf) format('truetype'), /* Safari, Android, iOS */
url(gothammedium.svg) format('svg');/* Legacy iOS */
}

How to convert online font link into local ones?

How to convert a online font link into local ones? (Probably download the font file is ok)
for example, HTML and CSS from google fonts:
HTML:
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro" rel="stylesheet">
CSS:
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
or with import style:
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro');
</style>
The main goal here is:
After download, and convert to local. The whole website can be served locally in local network, without internet connection.
You can take help from the google web font helper. Its really a handy tool to download the google fonts and install them locally.
The benefit of this tools and Implementation:
1. It will provide all format of fonts ( .eot, .woff, .woff2, .svg, .ttf ).
2. Help you in implementation with css. It generates css of the selected font and styles.
example of css code:
/* open-sans-regular - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans'), local('OpenSans'),
url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
3. Manually Select all font weights and style you want to include in your project and download them.
You have to download the font file and declare it in the css :
#font-face { font-family: Roboto; src: url('Roboto.otf'); }