I've got a quite basic question about the concept of #font-face:
When importing a font-face like this (example taken from filament groups font-events/font-loading.html):
#font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-lightit-webfont.woff2') format('woff2'),
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
font-weight: 600;
font-style: normal;
}
and in the CSS, I declare something like
body {font-family: 'Source Sans Pro';}
em {font-style:italic;}
strong {font-weight: bold;}
will the text get rendered with the appropriate font-faces, or will the browser apply <em>faux-serifs</em> and <strong>faux-bold</strong> on the default, regular Font (Source Sans Pro light in this case)?
If not, could this be "intercepted" somehow?
Thanks to all!
david
Related
I need to use a custom font in my email templates and #font-face looks like the only viable option.
In the previous version of the template there was ProximaNova
#font-face {
font-family: ProximaNova;
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot);
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot?#iefix) format('embedded-opentype'), url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.woff) format('woff');
font-weight: 400;
font-style: normal
}
#font-face {
font-family: ProximaNova;
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot);
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot?#iefix) format('embedded-opentype'), url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.woff) format('woff');
font-weight: 600;
font-style: normal
}
Now I need to replace it with Manrope https://fonts.google.com/specimen/Manrope?sidebar.open=true&selection.family=Manrope but there is no instructions how to use it in #font-face.
You can download the Manrope font family zip from google, extract the Manrope-VariableFont_wght.ttf file and place it in you css folder.
Then in your stylesheet simply add:
#font-face {
font-family: 'manrope';
src: url('Manrope-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'm trying to manually add a custom font to my localhost installation of WP, what I did so far:
download the font (Computer Modern) from fontsquirrel in .woff format
take the 4 files needed (Serif): Roman (cmunrm), Bold (cmunbx), Oblique (cmunti), Bold Oblique (cmunbi)
put the 4 files in the folder C:\xampp\htdocs\sitename\wp-includes\fonts\latex
write the following in style.css
CSS code
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
font-style: normal;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
font-style: italic, oblique;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", serif;
}
write the following in the WP editor
HTML code
This is normal text
<strong>This is bold text</strong>
<em>This is oblique text</em>
<em><strong>This is bold and oblique text</strong></em>
but the result is this
It seems that only Bold and Oblique have been loaded, in fact by replacing cmunti with cmunrm (Oblique with Roman) and cmunbi with cmunbx (Bold Oblique with Bold) in the CSS file this is showed
What is this due to, and how to solve it?
Does it help to be explicit with font-weight and font-style in each definition? That's what this answer does. It also adds css that makes strong/em associated to font-weight/font-style explicitly (which may be unneeded).
Don't know why but this solved the problem
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
font-style: italic;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff');
font-weight: bold;
font-style: italic;
}
I'm experiencing some major differences in font rendering (Google Font) on Win7 in Google Chrome browser. When Google Font is called via #import into LESS file, render is OK, but when I copy paste the same content of the file that is imported, I get distorted font.
Any ideas, why this is happening? I need to avoid #import due the Google PageSpeed optimization guidelines.
When Google Font is called via #import into LESS file, render is OK: http://cl.ly/Wtqb/o
Code is the following:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300&subset=latin,latin-ext);
But, when Google Font is called directly into LESS file, render gets distorted: http://cl.ly/WuOp/o
Code is the following:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzOY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
I have written a web application which uses the yaml css framework. One of the lines in the yaml css file is....
#import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);
The internet is very slow at my company and I want to replace that download with a local copy of the font.
To try to achieve this I went to http://www.google.com/fonts, downloaded the DroidSans and DroidSerif fonts. The files I get are...
fonts.DroidSerif-Italic.ttf
fonts/DroidSerif-BoldItalic.ttf
fonts/DroidSerif-Bold.ttf
fonts/DroidSerif.ttf
fonts.DroidSans.ttf
fonts/DroidSans-Bold.ttf
I then went to http://www.fontsquirrel.com/tools/webfont-generator and created 1 font kit for all my DroidSerif fonts and 1 font kit for all my DroidSans fonts.
I am a bit stuck now though because having a look at the demos in the generated font kits they have given a different font-face declaration per ttf file. In other words I have a number of font-face declarations...
#font-face {font-family: 'droid_serifbold'; ...
#font-face {font-family: 'droid_serifitalic'; ...
#font-face {font-family: 'droid_serifbold_italic'; ...
#font-face {font-family: 'droid_serifregular'; ...
...and same for droid sans...
But the yaml CSS framework doesn't use the fonts that way. Instead they have one definition of the font and then specify different font-weights...
body {
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
...
}
h6 {
font-family: "Droid Sans", Arial, Helvetica, sans-serif;
font-weight: 400;
q {
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
font-style: italic;
b {
font-weight: bold;
I would rather not change the yaml css as I might muck it up. My question is how can I change the font-face declarations provided to me from the font squirrel font kit to match the font-weight style my css is using?
thanks
If you go to the site you had in the first place: Google Fonts, and take a look at the generated code,
you can realize you need to:
Download these 4 files:
Droid Sans Bold
Droid Serif
Droid Serif Bold
Droid Serif Italic
Rename all appropriately and place in the fonts folder:
fonts/DroidSans-Bold.woff
fonts/DroidSerif.woff
fonts/DroidSerif-Bold.woff
fonts/DroidSerif-Italic.woff
And then use this code:
#font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 700;
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('fonts/DroidSans-Bold.woff') format('woff');
}
#font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: local('Droid Serif'), local('DroidSerif'), url('fonts/DroidSerif.woff') format('woff');
}
#font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url('fonts/DroidSerif-Bold.woff') format('woff');
}
#font-face {
font-family: 'Droid Serif';
font-style: italic;
font-weight: 400;
src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url('fonts/DroidSerif-Italic.woff') format('woff');
}
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but it doesn't work:
#font-face {
font-family: EntezareZohoor2;
src: url(Entezar2.ttf) format("truetype");
}
.EntezarFont {
font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
Following lines are used to define a font in css
#font-face {
font-family: 'EntezareZohoor2';
src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Following lines to define/use the font in css
#newfont{
font-family:'EntezareZohoor2';
}
One of the best source of information on this topic is Paul Irish's Bulletproof #font-face syntax article.
Read it and you will end with something like:
/* definition */
#font-face {
font-family: EntezareZohoor2;
src: url('fonts/EntezareZohoor2.eot');
src: url('fonts/EntezareZohoor2.eot?') format('☺'),
url('fonts/EntezareZohoor2.woff') format('woff'),
url('fonts/EntezareZohoor2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* use */
body {
font-family: EntezareZohoor2, Tahoma, serif;
}
When I went to Google fonts all they gave me were true type font files .ttf and didn't explain at all how to use the #font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working... I then found this site -
https://transfonter.org/
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf that Google gave me for Open Sans (which was like 10, I chose a lot of options...).
Then I selected the Convert button.
Heres the best part!
They gave me a zip file with all the font format files I selected, .ttf, .woff and .eot. Inside that zip file they had a demo.html file that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
#font-face
I still didn't know at this point how to include the fonts into my stylesheet properly using #font-face but then I noticed that this demo.html came with it's own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using #font-face so I was able to quickly, and easily, copy paste this into my project -
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
The demo.html also had it's own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn't need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after #font-face has been used properly -
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
Go through http://www.w3.org/TR/css3-fonts/
Try this:
#font-face {
font-family: 'EntezareZohoor2';
src: url('EntezareZohoor2.eot');
src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
font-weight: normal;
font-style: normal;
}
Try this link1,link2
#font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
I used Ataturk's font like this. I didn't use "TTF" version. I translated orginal font version ("otf" version) to "eot" and "woof" version.
Then It works in local but not working when I uploaded the files to server.
So I added "TTF" version too like this. Now, It's working on Chrome and Firefox but Internet Explorer still defence.
When you installed on your computer "Ataturk" font, then working IE too. But I wanted to use this font without installing.
#font-face {
font-family: 'Ataturk';
font-style: normal;
font-weight: normal;
src: url('font/ataturk.eot');
src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'),
url('font/ataturk.woff') format('woff');
}
You can see it on my website here: http://www.canotur.com