I am currently making a website in Wordpress. The problem I have is using a font. I couldn't find an answer to my question here, so I decided to ask myself. Someone send a font to me to use, but the problem is when I open the file there are different styles of that font. To be clearer: the font is Avenir Next and the different styles are Avenir Next Bold, Avenir Next Medium, Avenir Next Ultra Light.
It is not a google font. I have tried to include it with #font-face :
#font-face {
font-family: Avenir Next;
src: url('http://localhost/cultuurfonds/wp-
content/themes/monstroid/fonts/Avenir-Next.ttf');
font-weight: bold;
font-weight: 700;
}
#font-face {
font-family: Avenir Next Medium;
src: url('http://localhost/cultuurfonds/wp-
content/themes/monstroid/fonts/Avenir-Next.ttf');
font-weight: normal;
font-weight: 400;
}
With this I can use the Avenir Next (which is pretty bold, so I don't want to use that), but Avenir Next Medium doesn't work.
It is a paid font, but I am not the one who bought it. That person send the font file (Avenir-Next.ttf) to me, so this is what I have to work with.
I prefer to not use a plugin to include it. I couldn't find a good plugin for it anyway. But if there is no other way than to use a plugin, I am willing to use it.
I hope my question is clear (first question here).
If you want to load fonts from your local files, firstly you have to use tools like https://www.web-font-generator.com/ to generate different formats of the font.
Then you have to load all formats of the font like this
#font-face {
font-family: 'AvenirNextLTPro';
src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/AvenirNextLTPro-Regular.otf') format('opentype'),
url('fonts/AvenirNextLTPro-Regular.woff') format('woff'),
url('fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'AvenirNextLTPro';
src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),
url('fonts/AvenirNextLTPro-Demi.woff') format('woff'),
url('fonts/AvenirNextLTPro-Demi.ttf') format('truetype'),
url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
font-weight: 500;
font-style: normal;
}
As you can see font-family name is the same, but font weight size is different (Regular - 400 and Demi - 500)
Then, when you want to use different font weight in different elements you have to declare it like this:
p {
font-family: 'AvenirNextLTPro';
font-weight: 400;
}
h1 {
font-family: 'AvenirNextLTPro';
font-weight: 500;
}
Related
I'm trying to download as png the sound icon from this url.
I inspected the CSS and it shows that
.lienson:after {
font-family: "fontello";
font-size: 20px;
font-weight: normal;
font-style: normal;
display: inline;
content: '\e82c';
color: #ff4b54;
text-decoration:none;
cursor:pointer; /*gestion v.audio*/
}
#font-face {
font-family: 'fontello';
src: url('./../fonts/fontello.eot?58255341');
src: url('./../fonts/fontello.eot?58255341#iefix') format('embedded-opentype'),
url('./../fonts/fontello.woff?58255341') format('woff'),
url('./../fonts/fontello.ttf?58255341') format('truetype'),
url('./../fonts/fontello.svg?58255341#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.fontello {
font-family: "fontello";
}
I guess the link to download is ./../fonts/fontello.svg?58255341#fontello but could not figure out what is the full link?
Could you please elaborate on how to get this icon?
It's not a png, it's a webfont.
So, either you odwnload it directly from the url, which i wouldn't recommend because it would potentially raise copyright issues. FYI in this case the font url is relative to the css file url.
Or you make a screenshot of the element, which raise similar issues oif you use it.
Or you search for that font online, which could be a fail, since fontello is a font building tool, and the font you're searching for could simply not exist in the public domain.
I'm trying to use the Gill Sans-Light font on my website, but for some reason I can't seem to make the font work on iOS devices only. To demonstrate what I mean, here's a screenshot of the same font when I open my website in an Android phone, and when I open it in an iOS phone.
Android:
iOS:
Yes, I know there are lots of questions in here about this particular problem, I've read through them all but I can't seem to make my font work no matter what solution I use.
If it helps, I used Transfonter to convert the font format to EOT, WOFF2, WOFF, TTF and SVG.
Here's my code:
#font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-Light.eot');
src: url('../fonts/GillSans-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff'),
url('../fonts/GillSans-Light.ttf') format('truetype'),
url('../fonts/GillSans-Light.svg#GillSans-Light') format('svg');
font-weight: 300;
font-style: normal;
}
Thank you for your help.
iOS and macOS both include Gill Sans as a system font, so you are probably getting the default Regular weight of that, rather than your hosted version.
One option would be to intentionally use the system version on platforms that have a font called Gill Sans installed:
#font-face {
font-family: 'Gill Sans';
src: local('GillSans-Light'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
A more predictable option, especially for a typeface like this where there are many different “cuts” or digital versions, is to change the font-family name to something less likely to conflict with a system font. For example:
#font-face {
font-family: 'Example family name';
src: url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
h1 {
font-family: 'Example family name', GillSans-Light, sans-serif;
font-weight: 300;
font-style: normal;
}
Obligatory further reading: https://en.wikipedia.org/wiki/Eric_Gill
I'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.
Here is a demo:
http://jsfiddle.net/maitreyjukar/5ga5k2oa/
I am loading the font using the following CSS
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
font-weight: normal;
font-style: normal;
}
for all combinations of font-weight and font-style.
This is not only not an IE-specific issue it doesn't work on other browsers like Firefox.
Just write one font-face Rule istead of four like this:
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
}
Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.
It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...
local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.
However, you seem want to solely use locally installed fonts with a certain fallback order.
To achieve this, you could simply do the following:
body {
font-family: Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.
JS-Fiddle
you can define your font like below example, this will work in all the browsers.
#font-face {
font-family: 'ProximaNovaRegular';
src: url('../fonts/ProximaNovaRegular.eot');
src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
url('../fonts/ProximaNovaRegular.woff') format('woff'),
url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
}
I just added a webfont to my CSS file. I'd like to use different weights of the same font.
However if I set font-size: 14px at least Chrome and Firefox render the font in rather strange way.
All characters with font-weight: normal are in fact only 13px high and the bold parts are 15px high.†
Screenshot: (font-size set to 13px, 14px and 15px):
CSS font-face declaration:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Usage Example:
<p style="font-family: Frutiger; font-size: 13px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 14px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 15px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
Source of font:
Unknown, file has been passed along in my company for years. I used Font Squirrel to generate the *.woff, *.svg, and *.eot files. Same results with and without Font Squirrel's hinting feature.
Live Example:
http://font-render-issue.herokuapp.com/
Is there a way I can fix this?
† If you blend the first line (13px) over the second (14px) you can see that the non-bold parts match exactly. If you do the same thing with the second and third (15px) line, you can see that the bold parts match (at least in terms of height).
1) Like Jukka K. Korpela says, there is no CSS that actually uses the font.
2) The strange rendering you experience is the browser that tries to fake the bold style.
CSS:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* You did this inline with style="...". */
/* The font from the first #font-face */
p { font-family: Frutiger; }
/* Gets the bold font from the second #font-face */
strong { font-weight: bold; }
.small { font-size: 13px; }
.medium { font-size: 14px; }
.large { font-size: 15px; }
HTML:
<p class="small">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="medium">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="large">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
EDIT
The font's look fine on my machine (Mac, Firefox, Safari). woff files are used.
Then I submitted the example.html to browsershots: http://browsershots.org/http://font-render-issue.herokuapp.com/example.html#
A lot of different outputs. Windows needs (better) hinting.
The Grid Fit ('gasp' table) of the fonts have one entry. They both have one range defined at 65535, which is okay.
I also bumped into the copyright info. You might want to consider alternative fonts. ;) http://joelcrawfordsmith.com/new/font/frutiger
The two fonts are from the same release. But a local file may take precedence. You can disable loading local files with the font face smiley hack.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url('GraublauWeb.otf') format('opentype');
}
This is all I can think off for now.
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.