Use multiple #font-face rules in CSS - html

How can I use more than #font-face rule in my CSS?
I've inserted this into my stylesheet:
body {
background: #fff url(../images/body-bg-corporate.gif) repeat-x;
padding-bottom: 10px;
font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}
#font-face {
font-family: 'GestaReFogular';
src: url('gestareg-webfont.eot');
src: local('☺'),
url('gestareg-webfont.woff') format('woff'),
url('gestareg-webfont.ttf') format('truetype'),
url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}
This currently only applies for the whole body of text on the site. But, I would like to specify h1 to use a different font. How can I do this?

Note, you may also be interested in:
Custom web font not working in IE9
Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9).
#font-face {
font-family: 'Bumble Bee';
src: url('bumblebee-webfont.eot');
src: local('☺'),
url('bumblebee-webfont.woff') format('woff'),
url('bumblebee-webfont.ttf') format('truetype'),
url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}
#font-face {
font-family: 'GestaReFogular';
src: url('gestareg-webfont.eot');
src: local('☺'),
url('gestareg-webfont.woff') format('woff'),
url('gestareg-webfont.ttf') format('truetype'),
url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}
body {
background: #fff url(../images/body-bg-corporate.gif) repeat-x;
padding-bottom: 10px;
font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}
h1 {
font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}
And your follow-up questions:
Q. I would like to use a font such as "Bumble bee," for example. How can I use #font-face to make that font available on the user's
computer?
Note that I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I've shown above.
Q. Can I still use the other #font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?
Just list them together as I've shown in my example. There is no reason you can't declare both. All that #font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Thin.otf);
font-weight: 200;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Light.otf);
font-weight: 300;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Regular.otf);
font-weight: normal;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Bold.otf);
font-weight: bold;
}
h3, h4, h5, h6 {
font-size:2em;
margin:0;
padding:0;
font-family:Kaffeesatz;
font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

Multiple variations of a font family can be declared by changing the font-weight and src property of #font-face rule.
/* Regular Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-Regular.ttf");
}
/* SemiBold (600) Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-SemiBold.ttf");
font-weight: 600;
}
/* Bold Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-Bold.ttf");
font-weight: bold;
}
Declared rules can be used by following
/* Regular */
font-family: Montserrat;
/* Semi Bold */
font-family: Montserrat;
font-weght: 600;
/* Bold */
font-family: Montserrat;
font-weight: bold;

Related

How do I fix "fallback" weight for different fonts?

I have a small, but immensely annoying problem.
I'm supposed to have a font-family for my h1, in the following fallback: BreeSerif, arial, sans-serif.
BreeSerif should be weight 400.
Arial should be weigth 700.
Sans-serif should be weight 400.
Now I have tried several things, but none seem to work.
First try:
This renders my BreeSerif to "normal", makes Arial to bold, BUT it seems impossible to render sans-serif to "normal" since I've declared the h1 to 700.
Second try:
Now since BreeSerif shall be normal, I could simply apply "sans-serif" to a #font-face and put it in font-weight: 700, but it doesn't work.
/* FIRST TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;'
h1 {
font-family:
BreeSerif,
bold-arial,
sans-serif;
}
/* SECOND TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
#font-face {
font-family: 'sans-normal';
src: local('sans-serif');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arial,
sans-serif;
font-weight: 700;
/* THIRD TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 400;
#font-face {
font-family: 'arialBold';
src: local('arial');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arialBold,
sans-serif;
font-weight: 400;
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
}
#font-face {
font-family: 'TradeWinds';
src: url('fonts/TradeWinds-Regular.ttf');
font-weight: 400;
}
}
#font-face {
font-family: 'sansnormal';
src: local('sans-serif');
font-weight: 700;
}
body {
width: auto;
background: #eee;
font-family: arial, sans-serif;
}
p {
font-family: helvetica;
font-size: 14px;
color: #222;
}
/* LÖS DENNA SEN! */
h1 {
font-family:
BreeSeri,
arial,
sansnormal;
font-weight: 700;
}
#ContentWrapper {
background: white;
width: 960px;
margin: auto;
}
Expected result: normal, bold, normal
Actual result: normal, bold, bold
Defining dimensions by using size-adjust for fallback fonts slowly hits mainstream according to:
https://caniuse.com/mdn-css_at-rules_font-face_size-adjust
See the current implementation percentage by today used browser
What does this mean?
You can use the following CSS definition:
#font-face {
font-family: 'Lato';
src: url('/static/fonts/Lato.woff2') format('woff2');
font-weight: 400;
}
#font-face {
font-family: "Lato-fallback";
size-adjust: 97.38%;
ascent-override: 99%;
src: local("Arial");
}
h1 {
font-family: Lato, Lato-fallback, sans-serif;
}
As you can see we define a fallback version of our webfont (in our case Lato) and this fallback version is just a refernce to "Arial", which is a safe web font. But with size-adjust we can tweak the size of the fallback font. The attribute ascent-override has the same implementation rate than size-adjust.
Getting the adjustment settings
But now you wonder, where do i get those adjustment sizes. This nice little page calculates them for you and gives you the complete CSS for the custom fallback font:
https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat

Fonts not appearing hen uploaded to Bluehost

I recently uploaded my code to bluhost, to create my portfolio website. However, while the fonts were appearing on my computer, they do not display when I load the website (through the host bluehost).
Here is my CSS code. Is the problem trough CSS or bluehost?
#font-face {
font-family: playfair-italic;
src: url(fonts/playfair-display/PlayfairDisplay-Italic.otf);
}
#font-face {
font-family: playfair-regular;
src: url(fonts/playfair-display/PlayfairDisplay-Regular.otf);
}
#font-face {
font-family: playfair-sc;
src: url(fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}
#font-face {
font-family: opensans-regular;
src: url(fonts/open-sans/OpenSans-Regular.ttf);
}
#font-face {
font-family: opensans-semibolditalic;
src: url(fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}
#font-face {
font-family: opensans-semibold;
src: url(fonts/open-sans/OpenSans-Semibold.ttf);
}
Try to add './' before each url to convert them to relative paths.
#font-face {
font-family: playfair-italic;
src: url(./fonts/playfair-display/PlayfairDisplay-Italic.otf);
}
#font-face {
font-family: playfair-regular;
src: url(./fonts/playfair-display/PlayfairDisplay-Regular.otf);
}
#font-face {
font-family: playfair-sc;
src: url(./fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}
#font-face {
font-family: opensans-regular;
src: url(./fonts/open-sans/OpenSans-Regular.ttf);
}
#font-face {
font-family: opensans-semibolditalic;
src: url(./fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}
#font-face {
font-family: opensans-semibold;
src: url(./fonts/open-sans/OpenSans-Semibold.ttf);
}
Since these are both Google Fonts you probably want to use a script tag to pull the font files in from Google's CDN instead of embedding them into the project and serving them from your site.
In the <head> of your HTML file add this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i|Playfair+Display+SC|Playfair+Display:400,400i" rel="stylesheet">
And to use the fonts in your CSS files, use these rules:
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Playfair Display SC', serif;
//font-weight and font-style will define the rest
font-weight: 400; // This is the regular weight
font-weight: 600; // This is the bold weight
font-style: italic; // The default is regular

#font-face variant being used as default

I'm not sure what I'm doing wrong here? I'm trying to create a bold variant of my regular font, but it seems to always just use the last defined font-face in the matching font family. Any ideas?
<style>
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold"; }
#font-face {
font-family: ProofMedium2;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
body{
font-family:ProofMedium, san-serif;
}
.test{
font-family:ProofMedium2, san-serif;
}
</style>
<body>
testing <b>testing</b> <span class="test">testing</span>
</body>
Edit: I'm using chrome
Please remove inline style from div font-weight:normal;.
<style>
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
font-weight: "normal"; }
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold"; }
body{
font-family:"ProofMedium", san-serif;
}
</style>
<div>testing</div>
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold";
}
#font-face {
font-family: ProofMedium2;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
body {
font-family: ProofMedium, san-serif;
}
.test {
font-family: ProofMedium2, san-serif;
font-weight: bold;
}
testing <b>testing</b> <span class="test">testing</span>
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf")format("truetype");
font-weight: "normal";
}
#font-face {
font-family: "ProofMedium-1";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf")format("truetype");
font-weight: "normal";
}
#font-face {
font-family: "ProofMedium-2";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold";
}
body {font-family: "ProofMedium", san-serif;}
p.ProofMedium-1{font-family: "ProofMedium-1";}
p.ProofMedium-2{font-family: "ProofMedium-2";}
<p class="ProofMedium-1">i am ProofMedium-1</p>
<p class="ProofMedium-1">i am ProofMedium-2</p>
use above like diffrent font family names
In CSS have the highest precedence over internal and external CSS. What you define as inline CSS will not be overwritten by any external or internal CSS. Since you mentioned font-weight: normal, that is only being executed. So it should work if you remove it.
Bonus: Do not mix things up. If you are using external/internal CSS follow that standard only. Mixing them with inline CSS will only create confusion.
In CSS, if there are multiple definitions of #font-face the last definition will be executed and will overwrite the previous definitions.
Go through specificity in css
<style> #font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
font-weight: "normal";
}
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold";
}
body {
font-family: "ProofMedium", san-serif;
}
</style>
<div>testing</div>
Please try the following:
<style>
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
body {
font-family: "ProofMedium", san-serif;
}
.font_medium {
font-weight: 500;
}
.font_bold {
font-weight: 700;
}
</style>
<p class="font_medium">text</p>
<p class="font_bold">text</p>
I fixed the issue by changing,
font-weight: "bold";
to
font-weight: bold;
I'm surprised the quotation marks matter, but apparently they do.

CSS custom fonts

I have the following font files:
Raleway-Bold.ttf
Raleway-ExtraBold.ttf
Raleway-ExtraLight.ttf
Raleway-Heavy.ttf
Raleway-Light.ttf
Raleway-Medium.ttf
Raleway-Regular.ttf
Raleway-SemiBold.ttf
Raleway-Thin.ttf
Now i have implemented them in my css like follow:
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
.bold
{
font-family: "Raleway-bold"; !important;
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
.extraBold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraBold.ttf');
}
.extraLight
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraLight.ttf');
}
.heavy
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Heavy.ttf');
}
.light
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Light.ttf');
}
.medium
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Medium.ttf');
}
.thin
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Thin.ttf');
}
.semi_bold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
However when i change the class to semi_bold for example nothing changes? so am i implementing them in a wrong way or am i missing something?
Note That the first raleway the font-face works fine but it is the rest that doesnt seem to make any changes to my text
You need to define all of your custom fonts in #font-face blocks. Only then can you use them in normal styles. Here you have defined Raleway only, so those classes which use it (all except .bold) will use Raleway-Regular.ttf.
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
#font-face {
font-family: 'Raleway-bold';
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
#font-face {
font-family: 'Raleway-semibold';
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
...
.normal {
font-family: 'Raleway';
}
.bold {
font-family: 'Raleway-bold';
}
...
Note that you need to define somewhere that ordinary text should use font-family: 'Raleway';.
You need to declare each typeface (here, each font weight) in a #font-face rule of its own. You should also use different font formats to cover all browsers. For a simple example for the former principle, see font-face weight and for the latter, use e.g. the FontSquirrel generator.

Fonts are not taking with the same font-family name using wkhtmltopdf

It is known that from the following urls that wkhtmltopdf use only ttf format fonts.
use custom fonts with wkhtmltopdf
Google Web Fonts and PDF generation from HTML with wkhtmltopdf
My website uses only woff, so because of that I am using user-style-sheet to add ttf fonts. I am using many google fonts like Oxygen, Inconsolata, Open Sans, merriweather etc. by using the same font-family name in the user-style-sheet and its rendering correctly.
But the problem is with the fonts 'Open Sans Condensed' and 'sorts mill goudy'. When I am trying to change the font-family name with something else, its properly rendering not exactly with the same name.
I want to use the same names and don't want to change the variable name because I want to use the webfonts and not local fonts.
Second thing is that I don't want to download the fonts to my system and use it but only webfonts.
The way I am using userstylesheet is like this
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/829b7e77062a1a06dfc90c29f0f413e2a1de44fe/inconsolata/Inconsolata.ttf') format('truetype');
}
#font-face {
font-family: "sorts mill goudy";
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');
/*
src: url('https://bienvenidod-fonts.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');*/
}
#font-face {
font-family: 'Sorts Mill Goudy';
font-style: italic;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Italic.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Light.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Bold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 400;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLight.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: bold;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondBold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: italic;
font-weight: 300;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLightItalic.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 400;
font-style: normal;
src:url('http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: normal;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 800;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf') format('truetype');
}
And following is the way I am using the source code in the website
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Droid+Sans+Mono);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);
#import url(http://fonts.googleapis.com/css?family=Philosopher:400,700,400italic,700italic|Droid+Sans+Mono|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic|EB+Garamond);
#import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
#import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700&subset=latin,latin-ext);
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);
#import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
When I am trying to change the font-family name from 'sorts mill goudy' to 'sorts mill goudyy' in the both user-style-sheet and source code..its rendering correctly. What can be problem with the same font-family name?
You can try to use the latest version (0.12) which has support for WOFF fonts.