Does anyone know how to use the Font Squirrel #font-face kit generator, or something similar, to output a variant of a font, i.e. the bold variant?
I am using Gill Sans on my website and it is set to "font-weight: 900" or "font-weight: bold," which looks great on my machine because it has the font installed. But if I just embed the font generated by Font Squirrel, I only get the "regular" variant and "bold" doesn't display correctly.
Does anyone know of a way to embed the bold variant of a font?
There is only one file for Gill Sans, and when I upload it, here is what Font Squirrel gave me:
#font-face {
font-family: 'GillSansRegular';
src: url('../fonts/gillsans-webfont.eot');
src: local('☺'), url('../fonts/gillsans-webfont.woff') format('woff'), url('../fonts/gillsans-webfont.ttf') format('truetype'), url('../fonts/gillsans-webfont.svg#webfontDATch26L') format('svg');
}
The original file no doubt contains the information for bold, italic, etc., but I'm wondering if Font Squirrel strips out the variants, leaving me with only the "regular" variant.
Even if I just add bold to everything it doesn't show up bold anywhere:
#font-face {
font-family: 'GillSansBold';
src: url('../fonts/gillsans-webfont.eot');
src: local('☺'), url('../fonts/gillsans-webfont.woff') format('woff'), url('../fonts/gillsans-webfont.ttf') format('truetype'), url('../fonts/gillsans-webfont.svg#webfontDATch26L') format('svg');
font-weight: bold;
}
Nothing is bold even when I strip all font-familys and font-weights from anywhere else in my stylesheets. Everything just shows up as Gill Sans Regular.
I just received an email from Font Squirrel: the generator doesn't split .dfont files in the current version, so that explains it.
Related
In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs:
the icons are of font awesome and class fa fa-ANYEXAMPLE exists
the fonts are in a folder (/css/fonts) as it should be
the content of the file fontawesome.css are copied in the file bootstrap.css and called in the head of the site
I consider that my links are correct, since the icons load correctly most of the time
What could the problem be?
Open your style.css and link to FontAwesome using font-face:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make sure to edit the paths if they are any different.
As a small optimisation technique I want to serve the 'Avenir Next - Regular' font locally via css (so if a user has this font locally it will use it rather than download a woff2/woff/etc).
This font, for example, has been in IOS since version 6 so it's a quick win.
However I am not sure how to specify the local font name in the css stack? Do I need the word regular? Is there a program that would help?
#font-face {
font-family: 'Avenir';
src: local("Avenir Next Regular"), /* THIS? */
local("Avenir-Next-Regular"), /* THIS? */
local("Avenir-Next"), /* SOMETHING ELSE? */
url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}
Do I need to specify a font weight to get the 'regular' version? And then is there a way in devtools to see if it works? I presume not seeing a call to an external font file means success?
You should use the correct font name as defined in the font file. If you are on Windows you can install Microsoft's Font properties extension. When installed, you just right click the font file and select Properties. There you will find extra tabs with the font's info. One of them will show the fonts name.
I guess it will be like this:
#font-face {
font-family: 'Avenir Next - Regular';
src: local('Avenir Next'),
url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}
The font family reflects the base name of a font, while the variants are the children (font faces) and are defined by weight (e.g. Regular, Bold) and style (normal & italic).
When defining custom #font-faces, make sure to define a common font-family, so that font-weight and font-style gets applied properly and the font-face switches accordingly within the same font family.
There is no official naming convention for the various font faces themselves, but most fonts do follow this this pattern:
[Font Name] [Weight?] [Italic?]
The names for the common weights are usually Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold and Black.
However, some fonts may introduce an extra space in the Extra-variants or substitute Semi with Demi. More about the possible names can be found here.
Minor common exception: For the default 400-weight font, the name usually is Font Name Regular, while the weight is left out of the italic variant: Font Name Italic
Here is a table of possible font names for the imaginary font family Cool Font:
Weight
Style
Likely name
100
normal
Cool Font Thin
200
normal
Cool Font ExtraLight
300
normal
Cool Font Light
400
normal
Cool Font Regular
500
normal
Cool Font Medium
600
normal
Cool Font SemiBold
700
normal
Cool Font Bold
800
normal
Cool Font ExtraBold
900
normal
Cool Font Black
100
italic
Cool Font Thin Italic
200
italic
Cool Font ExtraLight Italic
300
italic
Cool Font Light Italic
400
italic
Cool Font Italic
500
italic
Cool Font Medium Italic
600
italic
Cool Font SemiBold Italic
700
italic
Cool Font Bold Italic
800
italic
Cool Font ExtraBold Italic
900
italic
Cool Font Black Italic
Keep in mind, that your font family might diverge from this table, so it is always best to check the font itself.
Example:
Assuming the entire family of Cool Font consists of an (italic) Regular and Bold font face sharing the naming convention described above, the correct definition could be:
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Regular'),
url('Cool_Font_Regular.woff2') format('woff2'),
url('Cool_Font_Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Bold'),
url('Cool_Font_Bold.woff2') format('woff2'),
url('Cool_Font_Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Italic'),
url('Cool_Font_Italic.woff2') format('woff2'),
url('Cool_Font_Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Cool Font';
src: local('Cool Font Bold Italic'),
url('Cool_Font_Bold_Italic.woff2') format('woff2'),
url('Cool_Font_Bold_Italic.woff') format('woff');
font-weight: 700;
font-style: italic;
}
If you don't know the correct variant name of a font, you can always define multiple local variants without any downsides:
#font-face {
font-family: 'Cool Font';
src: local('Cool Font SemiBold'),
local('Cool Font Semi Bold'),
local('Cool Font DemiBold'),
local('Cool Font Demi Bold'),
url('Cool_Font_SemiBold.woff2') format('woff2'),
url('Cool_Font_SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
When you don't want to let the user download a font and let it use the 'Avenir Next - Regular' font, you should put this font first in line in the font-declaration. Look into your own fonts for the exact name and set (only):
font-family: "Avenir Next - Regular", Arial, Helvetica, "sans-serif";
But check if 'Avenir Next - Regular' is so widely local available (not likely, because it is an expensive font).
Im using SourceSansPro-Bold. I have one file ttf downloaded, and I have other format declared as google links. But my question is if the these links are correct?
The problem is that Google links has word 'V4 declared, probably version 4, but I need fonts in version "bold".
How to check if there are the same fonts (both in bold version)?
Or how to modify google link to get bold font for sure?
Css Font definition:
#font-face {
font-family: 'source sans pro';
font-style: normal;
font-weight: bold;
src: font-url('SourceSansPro-Bold.ttf');
src: font-url('SourceSansPro-Bold.ttf') format('truetype'),
local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
Google font declaration with V4 string inside:
http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eo
You can select which weight of font you want here:
https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro.
If you want to download these files locally.
Visit the href from the <link>
Visit the url: from the #font-face of the font you need.
This will download the font.
I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to.
I have the ttf font in the same directory as my css file.
#font-face{
font-family: dakota;
src: url('dakota.ttf') format('truetype');
}
In an html file with the css file included. <p style="font-family: dakota;">sometext</p>
I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?
Use this format
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#rsuregular') format('svg');
}
To further gain more knowledge about font-face syntax, read Bulletproof #font-face Syntax.
To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.
Make sure the url is relative to the css file and not to the webroot.
#font-face{
font-family: 'dakota';
src: url('../fonts/dakota.ttf') format('truetype');
}
And you probably should add other types to make sure other browsers can use the font without problems.
#font-face {
font-family: 'dakota';
src: url('../fonts/dakota.eot');
src: url('../fonts/dakota.eot?#iefix') format('embedded-opentype'),
url('../fonts/dakota.woff') format('woff'),
url('../fonts/dakota.ttf') format('truetype'),
url('../fonts/dakota.svg#rsuregular') format('svg');
}
#Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.
All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.
I was finally able to get my site to show an Arabic font, but it is a default font that I don't want.
With the help of the SO community I found out about Dejavu fonts. I went to their website and downloaded a sans serif zipped folder. I am assuming I have to upload something to my server. If so which file/s do I upload? And what do I write in my html file to "reference" the fonts to my site? I opened all the files in the zip folder and only one of them indicated that I can download the font. But I don't need to download it on my computer. I need to upload it to the cloud so that it will be on my website.
Any ideas?
Also How can I upload the Dejavu folder here so that people can see it and know what I am talking about?
#font-face and #font-face Font Squirrel Generator
If you wish to use font embedding (and #font-face), then you need to present the font in different formats if you wish cover most platforms. See e.g. The Essential Guide to #font-face.
But there’s a much simpler way: just declare your preferred fonts (after checking that each of them covers all the characters you use) in your font-family declaration in CSS. Not all people would then see the text in DejaVu (only those who have got it along with e.g. Linux of OpenOffice or who have separately downloaded an installed it). The overhead of downloading a largish font, or several fonts, is not ignorable, especially when using e.g. slow mobile connections.
Expanding on bookcasey's point:
Check out the #font-face kits at Font Squirrel. There are several DejaVu kits available. Kits include the CSS and the DejaVu files in pretty much every available format you can use on the web. Put the font files in whatever folder you like and alter the CSS accordingly.
For example, I store my font definitions in /css/fonts.css and my fonts in /fnt/FontName/
From fonts.css
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.svg#DejaVuSansOblique') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.svg#DejaVuSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.svg#DejaVuSansBoldOblique') format('svg');
font-weight: bold;
font-style: italic;
}
Using the font is then simply:
body {
font-family: 'DejaVu Sans',sans-serif;
}