Here's the top of my style sheet:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body{
font-family:"Open Sans";
background-image:url(images/greyFadeBG.jpg);
background-repeat:repeat-x;
background-color:#ffffff;
margin:0px;
padding:0px;
height:100%;
min-width:870px;
font-size:14px;
color:#666666;
}
This displays the custom font in IE(9 and 10)
If I change the line from font-family:"Open Sans"; to font-family:"Open Sans", sans-serif;
The custom font will show in IE7, but all IE version will show the san-serif font.
I've tried this from Font Squirrel with no luck:
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas?
for the second #font-face to work you'll need to change the body font-family to
body{
font-family: "open_sansregular";
}
or better yet
body{
font-family: "Open Sans", "open_sansregular", sans-serif;
}
Related
My custom font doesn't work on different browsers. I imported 3 font weights using #font-face, all of them .tiff. But when I imported other variations (.eot, .woff, .woff2, .svg) all the text goes bold.
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-weight: lighter;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-weight: normal;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-weight: bolder;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bicyclette', Helvetica, sans-serif;
}
I also added Helvetica as a secondary font, but most browsers display it as Arial.
My website is deployed at novarion.ro.
My questions are: how can I make my custom font work on most browsers? And if that doesn't work, is there a way to keep it always Helvetica as the second option?
Using numeric font-weight seems to be more robust.
You might also add a font-style value if there are any italic styles in your html/css:
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
}
body{
font-family: 'Bicyclette', Helvetica, sans-serif;
}
h1{
font-weight:700;
}
.light{
font-weight:300;
}
Besides, make sure all font-files are properly loaded (check your dev tool's console for 404s).
Helvetica Fallback
Provided, there is some Helvetica installed on a system - font-family names can be quite different.
You could add alternative font-family names as described by Chris Coyier: Better Helvetica
to make the browser search for several font names.
body {
font-family: Bicyclette, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
However, this approach merely improves your chances of seeing a proper Helvetica, if one is available.
It works before I add support for .ttf, .eot and .svg, but now, it doesn't work anymore.
CSS:
#charset "UTF-8";
#font-face {
font-family: 'qianxsnjgregular';
src: url('./font/zh/qxsn-webfont.eot');
src: url('./font/zh/qxsn-webfont.eot?#iefix') format('embedded-opentype'),
url('./font/zh/qxsn-webfont.woff2') format('woff2'),
url('./font/zh/qxsn-webfont.woff') format('woff'),
url('./font/zh/qxsn-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'qianxsnjgregular', SimHei, sans-serif;
font-weight:normal;
font-style:normal;
}
I'm trying to use Circular font, but for some reason it falls back on "arial"
Here's my
fonts.css file:
/* Light Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Light.eot");
src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
font-weight: 300;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Light.eot");
src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
font-style: italic;
font-weight: 300;
}
/* End Light Font */
/* Normal Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Book.eot");
src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
font-weight: 400;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Book.eot");
src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
font-style: italic;
font-weight: 400;
}
/* End Normal Font */
/* Medium Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Medium.eot");
src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
font-weight: 500;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Medium.eot");
src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
font-style: italic;
font-weight: 500;
}
/* End Medium Font */
/* Bold Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Bold.eot");
src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
font-weight: 700;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Bold.eot");
src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
font-style: italic;
font-weight: 700;
}
/* End Bold Font */
/* Black Font */
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Black.eot");
src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
font-weight: 900;
}
#font-face {
font-family: "CircularWeb";
src: url("../fonts/Circular/CircularWeb-Black.eot");
src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
font-weight: 900;
font-style: italic;
}
/* End Black Font */
Here's my SASS to use the font:
$font-family-primary: "CircularWeb", Arial, sans-serif;
#media print {
body, html {
font-family: "CircularWeb", Arial, sans-serif;
}
}
*,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "CircularWeb", Arial, sans-serif;
}
I've tried multiple different methods for this, but nothing seems to work. Maybe I did them wrong, so I'm open to any and all suggestions. My compiled CSS directory: root/css. My fonts directory: root/fonts
If I go to: mysite.com/fonts/Circular/CircularWeb-Light.eot it saves the font, so I know I'm using the right directory. Any help would be greatly appreciated. (I've never added a font from a local directory only from fonts.google)
Troubleshooting steps:
test it online
try a different font
attempt with one font-face declaration
double check the font file path
check in the dev tool (f12 in Chrome) to see that the font is being declared on the elements you declared
I am currently working on a document generator symfony 2 bundle which allows to generate HTML and PDF documents (such as an invoice).
When i generate my document in-browser as an HTML page, everything's fine, but when i generate my PDF file, i have no fonts applied to my document.
I use the same templates for both case. Here is my pdf generation method :
private function generatePdfWithoutMerge($html)
{
$pdfService = $this->get('knp_snappy.pdf');
return $pdfService->getOutputFromHtml($html);
}
The $html variable is generated from a rendered twig template and, as said before, i have no issues if i display it as HTML in my browser.
LESS File :
#base-url: 'url-to-bucket';
#dark-grey: #555559;
#dark-pink: #970047;
#font-face {
font-family: paralucent_demi_boldregular;
src: url('#{base-url}/paradb__-webfont.eot');
src: url('#{base-url}/paradb__-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/paradb__-webfont.woff') format('woff'),
url('#{base-url}/paradb__-webfont.ttf') format('truetype'),
url('#{base-url}/paradb__-webfont.svg#paralucent_demi_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: paralucent_lightregular;
src: url('#{base-url}/paral___-webfont.eot');
src: url('#{base-url}/paral___-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/paral___-webfont.woff') format('woff'),
url('#{base-url}/paral___-webfont.ttf') format('truetype'),
url('#{base-url}/paral___-webfont.svg#paralucent_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: paralucent_thinregular;
src: url('#{base-url}/parat___-webfont.eot');
src: url('#{base-url}/parat___-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/parat___-webfont.woff') format('woff'),
url('#{base-url}/parat___-webfont.ttf') format('truetype'),
url('#{base-url}/parat___-webfont.svg#paralucent_thinregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: paralucent_mediumregular;
src: url('#{base-url}/param___-webfont.eot');
src: url('#{base-url}/param___-webfont.eot?#iefix') format('embedded-opentype'),
url('#{base-url}/param___-webfont.woff') format('woff'),
url('#{base-url}/param___-webfont.ttf') format('truetype'),
url('#{base-url}/param___-webfont.svg#paralucent_mediumregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
color: #dark-grey;
font-family: paralucent_lightregular, Helvetica, Arial, sans-serif;
font-size: 1.2em;
line-height: 0.9em;
}
.thin {
font-family: paralucent_thinregular, Helvetica, Arial, sans-serif;
}
.bold {
font-family: paralucent_mediumregular, Helvetica, Arial, sans-serif;
}
.demibold {
font-family: paralucent_demi_boldregular, Helvetica, Arial, sans-serif;
}
.price {
font-family: Arial, sans-serif;
font-size: 0.8em;
}
.separator_unbreak_wrapper {
}
.separator_unbreak {
page-break-inside: avoid !important;
}
.city_format {
font-size: 0.75em;
}
table tr th {
border-bottom: 1px solid #dark-pink;
font-weight: normal;
font-style: normal;
}
Thanks to DevDonkey comment :
I tried to have a nice file architecture with a children templates extending from a common parent template and a common LESS file, but Wkhtmltopdf has some issues with such complex architecture.
I had to gather everything in a single HTML file to make it work.
Many thanks all for your help.
i use this for invoke news fonts to my page, but not result. Why?
This fonts don't exist for default. I did download and insert in a folder Font in my skin.
#font-face {
font-family: 'akzidenzgroteskregular';
src: url('Font/Akzidenz-Grotesk (R) Extended Regular.ttf') format('truetype');
font-style: normal;
}
#font-face {
font-family: 'klavikaRegular';
src: url('Font/klavika-regular-webfont.ttf') format('truetype');
font-style: normal;
}
#font-face {
font-family: 'KlavikaBold';
src: url('Font/klavika-bold-webfont.ttf') format('truetype');
font-style: normal;
}
I used this in some projects:
.AFDefaultFont:alias,
body
{
font-family: Comic Sans, Tahoma, sans-serif !important;
font-size: 14px !important;
}