I have an HTML which uses the Helvetica Neue font for most of the text.
font-family: 'Helvetica Neue', Helvetica, Arial, Calibri, sans-serif;
<font color="#ffffff" face="'Helvetica Neue Medium','Helvetica Neue', Helvetica, Arial, sans-serif">Sample text</font>
Using Fount I can see that the text is actually written using Helvetica Neue Medium.
My question is where does the css/html look for this font ? I checked my /Windows/Fonts folder and there is no Helvetica font there.
The CSS will look for fonts installed in your font directory.
We can configure fonts with #font-face rule
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Medium"),
local("HelveticaNeue-Medium"),
url(HelveticaNeueMedium.ttf);
font-weight: bold;
}
ref https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Related
If I use this in my CSS file:
body {
font-family: "Open Sans", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
then Firefox (69.0.3 on OpenSUSE Tumbleweed, KDE 5.17.2) finds the "Open Sans" font on my system and renders the body text using this font as expected, and this is confirmed in the Web Inspector tool (which underlines the active font):
But if the order of font-family is adjusted to reduce the priority of "Open Sans" so that we end up with this:
body {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
suddenly Firefox no longer seems to be able to find "Open Sans" and instead uses whatever its default sans-serif font is, as confirmed in the Web Inspector tool:
Is there some obscure CSS3 rule which explains why Firefox ignores all fonts within font-family even when one of those fonts is available and will work fine if that font comes first in the list? Or is this a known bug in Firefox?
Update
As requested by j08691 I retested with a smaller number of fonts in the font-family list, and the length of the list makes no difference.
But I did find something weirder: no matter how long the list nor how soon "Open Sans" appears in the list, it works fine until you position "Open Sans" after Calibri or Arial. If Calibri or Arial come first then "Open Sans" is never found (even though neither Calibri nor Arial exist on my system) and Firefox defaults to the generic sans-serif family.
This surely is not correct CSS3 behaviour?
I have the following CSS rule:
some-selector {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
This shows up correctly as font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif in Chrome Dev Tools 'Computed' tab. Open Sans is loaded from the network in this case, and is applied correctly.
However in Dev Tools "Rendered Fonts" section I see
Cg7UAidtBkOtUziULXjeaA== — 8 glyphs
What does this mean?
I haven't used data: for a font anywhere, so I am not sure where did the base64 come from.
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');
}
This question already has an answer here:
Google Webfont conflict with local font
(1 answer)
Closed 4 years ago.
So I am working on the landing page for one of my little products.
http://finaltouchapp.com/
The application is for OSX so my target group is going to be on mac. Many of them are going to have Helvetica Neue so I have created a font family and a font weight that looks like this.
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:100;
The problem is that on some machines it will show the ultra light version like this.
https://img.skitch.com/20110808-kwyja7m8anmjsyc1xcqqk174x1.png
On my machine it shows the proper weight which is light
I then tried to be more specific with something like
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
But still no luck.
I am assuming it's because people have different weights in their Helvetica Neue folder but I am not sure how to deal with it.
One alternative is of course to use font-face but I would rather just have those who have the font show it and the rest use ordinary Helvetica.
Anyone know how to deal with it.
Using CSS3 you can include your own TTF font files and use that instead.
#font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName {
font-family:" your FontName ", verdana, helvetica, sans-serif;
}
The code snippet above is from: http://randsco.com/index.php/2009/07/04/p680 which explains this in detail.
When i use fontface, the browser needs some time before the font is downloaded and rendered, until then the browser default font is shown. I have tried to give Arial as fallbackfont and as general HTML/BODY font, but this does not change the problem.
is there a way to avoid this?
#font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
This is called a "Flash Of Un-styled Text" (or FOUT). You wont see it in Webkit browsers, because they hide the text until the font has been loaded. If you want to be more agressive with forcing other browsers to hide the FOUT, you can do it with some pre-written JavaScript.
Paul Irish explains it all here:
http://paulirish.com/2009/fighting-the-font-face-fout/
Here's the code you need:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['yourfont'],
urls : ['http://example.com/yourfontdeclaration.css']
}
});
</script>
and some CSS:
h2 {
font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 {
visibility: hidden;
}
Unless the visitor has the specialty font installed on their system, the browser has to download it just like it would an image file, or a linked stylesheet or .js file.
From reading the comments above, you're probably already doing the best that you can.
StrukturProBold is just a simple sans-serif font.
You can expand your list of secondary font choices though, maybe Arial and Helvetica aren't as good of a choice as say Verdana, or Trebuchet
font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;