I've got little problem with font-face. I've generated font-face for web-site, font is called 'Bebas Neue'. It works perfectly in Safari, but in other browser some text elements use the right font, some don't, although if you click on them in browser developer tools you'll see there 'Bebas Neue' as a font.
Here's a link to a web-site: http://glebgrg4.bget.ru. You can see the wrong font displaying on the big green button on top and in menu. How do I solve this bug?
Probably you didn't set Cyrillic Subsetting. Simply on fontsquirrel:
EXPERT... -> Subsetting: -> Custom Subsetting... -> Language: -> Select Cyrillic.
Related
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.
My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.
I've tried copying and pasting from my browser into Word, but it's not preserving the font.
Is there some way to determine which font is actually being used for a section of text?
Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.
It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.
Firefox
In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:
This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
Like for the above screenshot:
.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":
Hovering "System Fonts" gets me:
For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.
For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!
Chrome
For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:
For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).
Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:
.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)
Safari
The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:
This only works for elements. For text nodes (like a single character), the fonts tab is not shown.
For the same example as used above, Safari does not even indicate multiple fonts are used:
Identity
Name .AppleSystemUIFont
So, read on.
Other browsers (and Safari)
For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:
Multiple fonts in a single HTML element
For the above screenshots, the actual CSS defines:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.
Different fonts in different browsers
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows:
I've not investigated what that entails.
The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.
Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.
Firefox 22+ will show you which font is currently in use, without any extensions.
There is no need to use any external browser plugins for that.
In order to check which font is really used on the website in Google Chrome, you need to:
open developer tools (right click on a website and select inspect)
select desired object within "elements" tab
select "computed" tab, in the bottom pane you would see "rendered fonts":
You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.
This is related to question 7910391, but I don't see it as a duplicate, since the other question is about CSS. I want to know why the browser is failing here.
Try this out:
Open IE9
Open IE9 dev tools (F12)
Select a text element
Change the font-family on it to "Goudy Old Style"
If you're like me, you'll find the text is suddenly in italics. Why?
I'm on Win7...don't know if this is specific to this OS, but I do have normal Goudy font on the system.
It is possible that IE is using it's own fonts library separate from that of Windows, and it doesn't contain the non-italicized version of the font.
You can try to make a font face (they will override system & browser fonts.)
Start here:
http://www.fontsquirrel.com
It may sound obvious:
I'm used to design mockups of my webpages with illustrator.When I translate everything to css and test the page into my browser I can see that fonts are bigger in the illustrator mockup even if I used the same font setting on the css side.
//in css i have
body{font:Georgia,"Times New Roman",Times,serif;font-size:16px;
font-weight:normal;}
//I wrapped the example text inside "h1" tags
h1{font-size:24px;font-weight:normal;}
//in illustrator I have font georgia,24px,font-style "regular" selected
How could I fix that?
thanks
Luca
They seem to be different fonts altogether - look at the lowercase e and g. Check which font IE is using with the inspector. You can activate the inspector by pressing F12.
EDIT: The font IE8 is using looks like Times New Roman, IE's default font. Try replacing the font:Georgia part with font-family:Georgia. The font property is meant to be used as a shorthand to set all font properties at once and will probably not work when used to set only the typeface.
I would imagine that this is because different browsers handle fonts differently to Illustrator. You can control the font size / spacing and that kind of thing using CSS, as you've noticed - have you got any other font settings you're using in Illustrator like kerning or that sort of thing? That could be affecting it.
My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.
I've tried copying and pasting from my browser into Word, but it's not preserving the font.
Is there some way to determine which font is actually being used for a section of text?
Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.
It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.
Firefox
In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:
This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
Like for the above screenshot:
.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":
Hovering "System Fonts" gets me:
For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.
For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!
Chrome
For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:
For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).
Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:
.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)
Safari
The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:
This only works for elements. For text nodes (like a single character), the fonts tab is not shown.
For the same example as used above, Safari does not even indicate multiple fonts are used:
Identity
Name .AppleSystemUIFont
So, read on.
Other browsers (and Safari)
For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:
Multiple fonts in a single HTML element
For the above screenshots, the actual CSS defines:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.
Different fonts in different browsers
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows:
I've not investigated what that entails.
The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.
Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.
Firefox 22+ will show you which font is currently in use, without any extensions.
There is no need to use any external browser plugins for that.
In order to check which font is really used on the website in Google Chrome, you need to:
open developer tools (right click on a website and select inspect)
select desired object within "elements" tab
select "computed" tab, in the bottom pane you would see "rendered fonts":
You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.