I'm using Signika Bold as font for my headers. Font is loaded from Google Webfonts. As you can see in the demo, there is a problem with showing letter "Č", both upper and lower case. The letter is on the list of supported fonts on the official Webfonts page.
CSS:
#font-face {
font-family: "Signika";
font-style: normal;
font-weight: 700;
src: local("Signika-Bold"), url(http://themes.googleusercontent.com/static/fonts/signika/v3/7M5kxD4eGxuhgFaIk95pBRsxEYwM7FgeyaSgU71cLG0.woff) format("woff");
}
h1 {
font-family: "Signika", Helvetica, sans-serif;
}
I have also tried typing the letter as HTML entitle (č), but it doesn't help.
<link href='http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
Thanks to Anon, the solution is to check the Latin Extended in the Google font settings. The demo is updated.
CSS:
#font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: local('Signika-Bold'), url(http://themes.googleusercontent.com/static/fonts/signika/v3/F587cG5P5ff3TX6w4JlorxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
Or:
HTML:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext">
Related
I downloaded a few fonts from google font and there are some font files for bold, italic, light, thin etc. Let's take Robot as an example, these are two font files I downloaded: Roboto-Bold.ttf, Roboto-Regular.ttf.
I wonder how should I use the file with Bold? What is the difference if I pick the regular font file with below code:
canvasContext.font = `bold 20px Robot`
The above code defines the bold for the Robot font family. Do I need to import Roboto-Bold.ttf file for the bold in this case? The same question for italic, light, thin etc.
You will need to define your font in css using #font-face with all the weights. Define same font-name for all the styles, just differentiate them with font-weight like below
#font-face {
font-family: "Roboto";
src: url("Roboto-Regular.ttf");
font-weight: normal;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-Bold.ttf");
font-weight: bold;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-thin.ttf");
font-weight: 100;
}
and then use it in your elements like
element {
font-family: Roboto;
font-weight:100; /* for Thin */
font-weight:300; /* for Light */
font-weight:normal; /* for Regular */
font-weight:bold; /* for Bold */
}
Or you can use html <link> to embed your font like
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500" rel="stylesheet">
If you want to use google font just go to fonts.google.com & select font then customize it
After finishing your customization go to "EMBED"
Copy the link & paste it into your html head section.
Copy the font family name & paste into your css file selector like below.
canvas {
font-family: 'Roboto', sans-serif;
font-weight: thin/normal/bold/bolder; // Choose any option
font-style: normal/italic/oblique; // Choose any option
font-size: 20px;
}
you must link file font to your project
<style>
#font-face {
font-family: 'Athiti';
font-style: normal;
font-weight: 400;
src: local('Athiti'), local('Athiti-Regular'), url('fonts/Athiti-Regular.ttf') format("truetype");
}
</style>
When you call font name
<div class="container" style="font-family: 'Athiti' font-size: 16px; ">
<b> Font Bold </b>
</dib>
You need to define Bold font
#font-face {
font-family: 'RobotoBold';
src: url('./Roboto-Bold.ttf');
}
And use canvasContext.font = 20px RobotoBold
You need to import one by one.
Yes you will have to import each tff file , however the regular version still can be made bold etc in some/most family fonts , for example you will have the normal bold weight 400 , but if you want to get other bold variations e.g 500 600 700 you will need to import the bold variation of the font
I have a web page that successfully uses one of the two font-faces I have here. I want the user to be able to see a top menu div tag that is styled with the Cubano font while the rest of the text of the page will be open sans. #font-face seems to be just unique so I cant add two font-familys to it.
EDIT: Demo can be seen here on the rate1.html page.
#font-face {
font-family: 'OpenSans';
src: url("fonts/opensans.ttf") format('truetype');
font-weight: normal;
font-style: normal
}
#font-face {
font-family: 'Cubano';
src: url("fonts/cubano-webfont.ttf") format('truetype');
font-weight: normal;
font-style: normal
}
body {
font: 32px/40px 'OpenSans', sans-serif;
color: #777;
}
body div.recent {
font: 32px/40px 'Cubano', sans-serif;
color: #777999;
}
For the Open Sans you can use #import (in .css file):
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
or link it in the <head> :
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
See more options here
I'm implementing google's font named Roboto in my site.
I need 2 types : bold and regular.
So I checked both types and pressed the download button :
But in the downloaded rar file I got ALL the font styles ( also ones which I didn't choose) :
Anyway I wanted to test the regular font : (the fonts are now in my site and not being loaded from google).
(I got those other extensions types (eot,woff,svg) using a font converter (http://www.font2web.com/))
So I did :
<style type="text/css">
#font-face {
font-family: 'Roboto';
src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
url('/font-face/Regular/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'Roboto', sans-serif; }
</style>
Question :
Let's say I want to apply a Roboto bold style to a div.
Should I do it like this :
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
or should I do this ( start all over...)
#font-face {
font-family: 'Roboto-bold';
src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
...
}
and then
div { font-family: 'Roboto-bold', sans-serif; }
This is what you have to do:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
Notice how the same font name is used in both #font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the #font-face rules correctly.
Any reason why you're downloading the font? If you're using it in a web site you can just use the #import code given by Google.
The checkboxes choosing the variations at the beginning only define the import code. If you choose to download the font to your computer it always gives you all variations regardless of the choices you made.
To use the font just include the link to the stylesheet containing the #font-face which google gives you. E.g.
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
or
#import url(http://fonts.googleapis.com/css?family=Roboto);
in your existing stylesheet.
And then it's just a case of setting the font-family for the elements you choose. E.g.
body {
font-family: 'Roboto', sans-serif;
}
Regarding your question :
Yes, you need a separate #font-face for each variation. See example from google
Google example :
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
If you don't include a bold variation for your font the browser will render bolded text as faux-bold instead. This can have variable appearance depending on browser and OS. Likewise for italic and bold-italic.
From your question it looks like your only declaring one font-face rule, related to the Regular version of the Roboto font.
Using the CSS from your question:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Will result in the browser faux bolding the font. The reason is, the font-face rule hasn't been included for the bold version of the font. Reference here: http://alistapart.com/article/say-no-to-faux-bold
As others (#yotam, etc) have mentioned (regardless of how the fonts are being served) you would need to declare a font-face rule for each font weight.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
You would then use that font weight as follows:
body {
font-family: Roboto, sans-serif;
font-weight: 400;
}
h1 {
font-family: Roboto, sans-serif;
font-weight: 700;
}
I would stress to use the actual font weight value and not font-weight: bold. As mentioned using font-weight: bold leaves the decision down the the browser.
At some point you may use a font with weights of 700, 900. Say 700 is be bold, 900 extra bold. If your declaring font-weight: bold the 900 weight would be used, which isn't the effect you would want.
You don't have to start all over.. if you got #font-face in your style then all you need to add is font-family like you said.
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
And just for make it clear you can make the font as default by using him in body element like this
body {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
EDIT:
You might considering download your font into your website folder, then instead taking website loading time you'll just have to add the next code to your #font-face:
#font-face {
font-family: 'Roboto';
src: url('fonts/font.ttf'); /* IE9 Compat Modes */
/*....*/
}
The font should be inside fonts folder and he named font.
I am generating EPUB files with embedded fonts using ebook-convert from the calibre project. When I declare multiple font faces in HTML, it works fine:
<html>
<head>
<style type="text/css">
#font-face{
font-family: "test";
font-style: normal;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Regular.otf);
}
#font-face{
font-family: "test";
font-style: italic;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Italic.otf);
}
body{
font-family: "test";
}
</style>
</head>
<body>
This is a test with <i>italic</i>.
</body>
</html>
produces:
but when I convert it to EPUB, I only get the first font for the whole document:
I checked the EPUB. The fonts are embedded properly and the CSS is included. There can't be a conflict with my system fonts since I used "test" as a string to identify the font.
What is wrong with EPUB? Am I declaring the fonts wrong?
This blog post about epub fonts may help
I have downloaded the Open Sans Condensed Light font from Google Web Fonts, and also attached their CSS code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
rel='stylesheet' type='text/css'>
But every browser other than Firefox, shows exact font family i.e. it looks fine in IE, Chrome, Safari, but not in Firefox.
Here is my CSS and the HTML code:
h2.title-border {
border-bottom: 1px solid #000;
margin-top: 10px;
line-height: 45px;
margin-bottom: 15px;
}
.heading-sub {
background: #000;
font-family: "Open Sans Condensed Light";
font-weight: normal;
text-transform: none;
font-size: 32px;
padding: 0 15px;
margin-bottom: 0px;
color: #fff;
border-bottom: 1px solid #000;
}
HTML:
<h2 class="title-border"><span class="heading-sub">About Us</span></h2>
Can you please suggest, how should I fix Firefox regarding this?
According to the API, you should be calling the font like this
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>
The light variant needs to be called specifically, i.e. :light.
The other browsers are probably ignoring the Light in your stylesheet and giving you the Open Sans Condensed you asked for in the API call.
See here
Condensed is the "style" of the "Open Sans" font, not part of the name. This worked for me.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />
.selector
{
font-family:'Open Sans';
font-style:condensed;
}
I must have tried a gazillion variations to get this work. I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.
I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light') script is wrong.
As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans');
}
#font-face {
font-family: 'Open Sans Condensed';
font-stretch:condensed;
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light');
}
##font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
To make the font work for IE8-IE9 you have to use a EOT font file,
On this page you can download the font as a webkit:
http://www.fontsquirrel.com/fonts/open-sans-condensed
You have to refer to Google CSS. See their QuickStart Guide.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">
You probably ought to use font-stretch: condensed (see Mozilla docs).
For example, change your .heading-sub CSS as follows:
.heading-sub {
background:#000;
font-family:"Open Sans";
font-stretch: condensed;
font-weight:300;
text-transform:none;
font-size:32px;
padding:0 15px;
margin-bottom:0px;
color:#fff;
border-bottom:1px solid #000;
}
Make use of Google Fonts Open Sans in the various styles:
Click on this link -> https://www.google.com/fonts/specimen/Open+Sans and then click on Open Open Sans in Google Fonts.
Under option 3 and 4 you will find the html link to use in your header as well as the CSS style usage.
for Firefox:
My problem solved after I added to CSS this line:
font-stretch: condensed;
You should use Google generated code, mine was:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
as I am using 700 and 300 weights.
CSS:
font-family: 'Open Sans Condensed', sans-serif;
font-weight:700;
font-stretch: condensed;
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps - at least for me it was a major pain in the behind.
It doesn't works for me because the #import should be the first line in style.
Works:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
.myStyle {
}
</style>
Doesn't works:
<style>
.myStyle {
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>