This font Glamora is displayed with more thick than it should be and other weird things
the font look like this,
but is displayed like this
this is the formatting for that text
.brand h1{
color: #FEF2DB;
font-family: Glamora;
font-size: 230px;
line-height: 68.1%;
text-align: center;
letter-spacing: 0.095em;
}
There’s probably only one weight of this font, ie. a single style with no bold version or other variants.
By default, h1 and all other headings are set to be bold, so you are probably getting some faux bolding, created by the browser.
Try adding:
.brand h1 {
font-family: Glamora;
/* Etc. */
font-weight: normal;
}
I was able to reproduce your issue, and adding font-weight: normal; fixed it:
This might also have something to do with how the font outlines or how the font file was built, or the fact that it hasn’t been produced as a web font.
The license doesn’t appear to allow converting it into a web font, but it might be worth getting in touch with the designer and seeing if they would produce WOFF and WOFF2 files for you, or modify the license to allow converting the format. That said, that might not impact the issue, and this CSS change does fix it.
Related
Here is the problem. So everything works fine for me on my machine, localhost and when the website is uploaded to online host. But I got my friends to go to the site to check if everything is working and the regular Roboto font loads fine but the thin version of it doesn't. I originally just had the import link from google for the font but later added the font face import code that I found on here but that doesn't work too. I even tried adding the font-weight property but it still doesn't work.
I need help my head hurts real bad here's the code enjoy
Top of the css file
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(fonts/Roboto-Regular.ttf) format('ttf');
}
#font-face {
font-family: 'Roboto thin';
src: local('Roboto thin'), url(fonts/Roboto-Thin.ttf) format('ttf');
}
Class for one of the texts that uses the font
.txt2 { /* text */
font-family: 'Roboto thin';
font-size: 24px;
color: white;
text-align: center;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 20%;
font-weight: 100;
}
The #font-face is loading a local file, but also, import in my experience doesn't work like how you expect. I'm on mobile so I can't get too detailed but I usually call the fonts url in the html using a tag in the head. This has the added benefit of the browser being able to pull that file in asynchronously, rather than after the css file loads, which will give you a small speed increase.
More than likely this code is actually failing for you too, but your browser has the font in cache and it's safe to use so it does. Or you have robot installed outright.
EDIT: Alright, I'm on a desktop now, and want to clarify some things.
#font-face defines a font and how it can be called. It gives it a name, where the font files are stored, and if it's considered italicized, normal, etc.
The Google Fonts file you are calling contains that information, it's whole purpose is to define the things you are putting in your #font-face lines.
As I said, #import is a bit tricky.
First and foremost, make sure your #import statement is the very first thing your CSS file contains. If you only have one #import, it should be the first line.
Using Google Fonts' other option, the HTML , will work marginally faster. The difference may stop your users from seeing a flicker of the wrong font on their first page load.
Remove the #font-face rules you have altogether, they are overwriting your imports.
As a best practice, give your font-family rule a fallback. font-family: 'Roboto thin', arial, sans-serif;
I've found an inconsistency among browsers in handling font-size (on Mac OS X 10.11.4). I'd like to know if this is a bug in Firefox, or a bug in CSS, or am I not understanding something about CSS?
This JSFiddle shows the details. In a section like this:
<pre>Start of pre section
<code>**problem here!**</code>
End of pre section
</pre>
the style code { font-family: Courier; } changes the font-size shown by Safari and Chrome, but not in Firefox. Yet in other sections, the code element size increases from 13px to 16px in all the browsers.
Why does the font-size increase from 13px to 16px after setting the font-family in all browsers?
Perhaps Firefox is changing the font-family but not the font-size. Yet it does change the font-size in other places, like in code inside a p element or inside a list.
I'm guessing the solution is to just aggressively set explicit font size with pixel units wherever I care about it (ignoring accessibility).
Quote from possibly related Firefox bug from 2006: Bug 328621 - strange default monospace font size -- differs from the proportional fonts
Though the inter-browser portability problem this imposes doesn't seem that trivial to me. The last time I wanted to markup HTML so that the monospaced parts showed the same in both Mozilla and M$IE I had to resort to absolute font sizes, which should be certainly avoided due to the accessibility problems they impose.
And yes, there's a simple workaround -- changing the settings. But most of the users will use defaults. :-(
This issue is not new; it has been known for many years that browser handling of monospace fonts is incredibly screwy and inconsistent across browsers. A number of workarounds are available that don't require you to override the monospace font preference set by the user, the most perplexing of which is to specify
font-family: monospace, monospace;
That's right: two monospace keywords at the end of the font stack. Nobody knows why this works; it just does.
For what it is worth, Firefox's UA stylesheet contains references to a -moz-fixed keyword which refers to the preference that is set by the user, which includes both the family and the size despite it being a value for the font-family property. Firefox ships with the preference set to 13px in whichever the system's default monospace font is. It would seem that monospace, monospace forces the browser to compute the element's font-size according to the spec while still preserving the preferred monospace family, at least. But this is just a guess.
Is this a bug? It depends on whom you ask. If you ask browser vendors, they'll probably say this is intentional. If you ask other authors, they'll probably also call it a bug. Is this a spec violation? No, because the spec allows browsers to implement defaults however they like.
Why does the font-size increase from 13px to 16px after setting the
font-family in all browsers?
probably because the browser's default stylesheet has these settings.
I'm guessing the solution is to not try to understand all this but
just aggressively set font and font-size wherever I care about it.
Not sure what you mean by "agressivly" but yes: If you have particular demand for that style, set it as precisely as possible in your own stylesheet, including font familiy, weight, size etc.
Since I asked the question and got a couple of good faith answers that are however not really answering my question: I'm going to try to prove that this really is a problem with current browsers. See my comment at the end about why this might or might not matter.
Here then are
3 problems with font-size in CSS/HTML in FireFox, Chrome and Safari on Mac OS X 10.11.4:
Problem 1. Changing font-family should not change font-size, but it sometimes does.
I don't know what the "user agent stylesheet" is. There can be all kinds of settings on it. But regardless of those settings, changing font-family should not change computed font-size. (Some fonts might appear larger at the same font size compared to other fonts at same font size, so visually they can look bigger or smaller, but the computed font size number should not change).
notation: in the following
pre(code) means roughly <pre><code>text here</code></pre>
p(code) means roughly <p><code>text here</code></p>
In the default situation, a page with no styles, I see this in all 3 browsers:
pre=13px
pre(code)=13px
p=16px
p(code)=13px
<pre>pre <code>pre(code)</code></pre>
<p>paragraph <code>p(code)</code></p>
Perhaps the user agent stylesheet is something like this:
pre { font-size: 13px }
code { font-size: 13px }
p { font-size: 16px }
The user agent can't be using relative sizes for code, because it appears as 13px inside of both pre and p elements. So it could be this:
pre { font-size: 81.25% }
code { font-size: 13px }
p { font-size: 100% }
or the equivalent using em instead of percentage. Or perhaps a descendent rule with percentages or em:
pre { font-size: 81.25% }
pre code { font-size: 100% }
p { font-size: 100% }
p code { font-size: 81.25% }
But then how do we explain this:
After setting code { font-family: Courier } (or any font family other than monospace) we get:
pre=13px
pre(code)=16px for Chrome & Safari pre(code)=13px for FireFox
p=16px
p(code)=16px
code { font-family: "Courier"; }
<pre>pre <code>pre(code)</code></pre>
<p>paragraph <code>p(code)</code></p>
No matter what the stylesheet is, the font-size should not change after only changing the font-family.
Problem 2. Relative font-size should be based on parent element's computed font-size. But it sometimes is not.
With no styles we have:
p=16px
p(code)=13px
After setting code { font-size: 100%; } we should have
p=16px
p(code)=16px
Instead we still have:
p=16px
p(code)=13px
This is wrong because author style should override default user-agent (browser) style. And relative (percentage) font-size is based on the parent element's computed font-size.
code { font-size: 100%; }
<p>paragraph <code>p(code)</code></p>
Similarly, after setting code { font-size: 120%; } we should have
p=16px
p(code)=19.2px = 16px * 1.2
Instead we have:
p=16px
p(code)=15.6px = 13px * 1.2
code { font-size: 120%; }
<p>paragraph <code>p(code)</code></p>
This shows that parent element is being ignored, and that some phantom value of 13px is being used to calculate the relative font-size.
Problem 3. The standard advice to use html { font-size: 62.5% } and then use em or rem for font-sizing does not work correctly
(Note: FireFox with rem does seem to be correct)
(Note: using the also recommended body { font-size: 62.5% } seemed to produce some crazy results, like doubling of font sizes, so I'm not considering that here.)
With html { font-size: 62.5%; } and code { font-size: 1.6em; } we have:
p=10px
FireFox: p(code)=13.0167px
Chrome: p(code)=13px
Safari: p(code)=13px
These should all be 16px = 1.6 * 10px
body { font-size: 62.5%; }
code { font-size: 1.6em; }
<p>paragraph <code>p(code)</code></p>
With html { font-size: 62.5%; } and code { font-size: 1.6rem; } we have:
p=10px
FireFox: p(code)=16px
Chrome: p(code)=13px
Safari: p(code)=13px
FireFox is the only browser to get it right here.
html { font-size: 62.5%; }
code { font-size: 1.6rem; }
<p>paragraph <code>p(code)</code></p>
I suspect this all doesn't matter much because people are used to slapping font-size styles all over the place in their CSS.
From my reading, there has been an attempt to make web pages more responsive to the native settings on each device: to adapt to varying hardware with more or fewer pixels per inch (PPI); to allow users with reduced vision to request larger text so they can read more easily; etc.
There are various recommendations and a bit of controversy about how to best do this: specify font-size with html { font-size: 62.5% } and use em or rem everywhere seems to be a popular opinion. Lately just using good old px to specify font-size is coming back in style, with the idea that px does not specify actual screen pixels but rather an idealized 96 dpi for the viewer (which may translate to a different number of pixels) and letting the browser's zoom controls handle user desired changes in font-size.
In summary, I think these problems with font size argue against the logic behind most of the advice about "responsive design" for font size. My guess is that this is an area where there is a lot of history factored into how browsers work, and it's near impossible to change now. And of course there are millions of websites with existing code that are all presumably happy with how font sizing is working now.
It seems to me that the only way to get consistent font sizing is to use pixels: px. For example, px at the Root, rem for Components, em for Text Elements. Or just just use pixels everywhere.
Mozilla writes the following about accessibility and font-size
Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.
But with all these bugs with inherited and relative font size it doesn't seem like an option to avoid using pixels. Plus the argument about a reference pixel and using the browser's zoom control seems to solve the accessibility issue.
That's because back in the dark ages one Netscape dev decided to force his personal preferences on everyone else in the browser settings (most coders are young people who think it is smart to destroy their eyes by setting text size one or two sizes smaller than everyone else, they think "monospace" belong to them and "sans serif" to normal human beings).
Thus, Firefox ships with defaults that alias "monospace" to a smaller font size than "sans serif". Pretty much destroys coordinated font sets (where the monospace font is designed to look the same as the serif or sans serif one).
You can "fix" it locally by launching about:config and changing all font.size.fixed.* properties to the same value as font.size.variable.* ones. But since you can't fix all Firefoxes in the wild, that makes the monospace css alias useless for this browser.
Response from OP moved from question to answer:
The answer from BoltClock was super helpful. The page he/she referenced about Fixed Monospace Sizing by Eric Meyer has a thorough analysis and some solutions. It explains some of the browser mechanics related to when the user's font preferences are used, which explains some of the mysterious behavior I was seeing (e.g. why was the code element seeming to inherit a size of 13px when it was the child of a p element with size of 16px: the reason is it actually inherits size medium which causes the browser to use the default browser/user preferences).
For my situation I'm finding I can remove the html { font-size: 16px; } style and instead add the following:
pre { font-family: monospace, monospace; }
code { font-family: monospace, monospace; font-size: 100%; }
This gives me consistent relative font-sizing but still allows the user to set the default font-size. Eric Meyer recommends using monospace, serif but I'm finding that monospace, monospace works, and I think it makes a little more sense when you see it in a style-sheet (it's odd, but looks probably intentional, and it means you really, really want monospace).
I think that the ultimate problem is that the browsers have different font-size defaults/preferences for monospace font, than for other fonts. The main idea of "accessible responsive design" in regards to font-size is to let the user have control over font-size. But when we have several settings for font size (serif, sans-serif, monospace) then that's too many options for the user to set. The user just wants bigger text that they can read. But for the author: they just want the relative sizes of the fonts to be correct at whatever given size.
In case it's helpful to someone else, here are some examples (in the slick Eric Meyer style) showing that monospace, monospace fixes some of the problems I wrote about in my own answer below.
code:before {
content: attr(style);
border-bottom: 1px solid #AAA;
color: #575; margin-right: 0.5em;
}
p {
margin-bottom: 2em;
}
<p>This is a 'p' element with a <code>'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 120%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 120%">'code' element</code> contained within.</p>
I came across a similar issue where I used monospace and the sizes were different in Google Chrome and Edge & Mozilla Firefox. This is because different browsers have different font weights and sizes for standard fonts.
To resolve this issue I used Google fonts and then the fonts sizes were the same in all browsers.
It's been a while (2 years?) since I've done a bigger website. I'm now developing one and as usual, I ran onto some cross-browser difficulties.
The problem I'm solving now can be seen on the picture below - I have a page with a h2 element, which displays differently in Chrome and IE 11. The element has all the properties like line-height, font-size, padding, margin and so fort specified, but still displays differently. In one browser, the text is right on the top of the element, in the other one, it is in the middle. This causes some graphical issues and I can't seem to find a way to resolve this without writing a browser-specific css definition for each browser (Firefox does something similar to and is somewhere in the middle of these two - the text is in the upper part of the element, but not on the very top of it).
The other similar elements like h1 are affected as well.
I understand this is likely related to the way these browsers handle fonts and calculate their positioning, but at the moment, this doesn't help me much. I'd be grateful for any advice you might have, since I'm probably not the first one to be solving this.
EDIT:
I won't insert the HTML code here since this affects all these elements regardless of where they appear. For an instance, the text highlighted in the page is a normal h2 with the following CSS attributes:
color: rgb(0, 0, 0);
display: block;
font-family: 'Myriad Pro', Arial;
font-size: 22px;
font-weight: bold;
height: 27px;
margin-bottom: 0px;
margin-top: 20px;
text-transform: none;
width: 634px;
normal has this css:
font-size: 14px;
margin-top: 10px;
margin-bottom: 12px;
line-height: 17px;
So I've found a solution. Little surprising, but makes sense.
I'm using Typekit from Adobe, which is something like google fonts. I actually found out that the cause of this text-shifting is the fact that I'm using the typekit font. When I switched to Arial, everything was fine.
I also came acrticle which describes the topic: http://blog.typekit.com/2010/09/13/updating-vertical-metrics-for-cross-platform-consistency/
The problem has to do with baseline and em boxes set wrong in the given font I used. Switching to another font which had these properties set correctly fixed my problem.
Thanks for all your help guys.
I'm using #font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for #font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the #font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.
As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.
input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
font-size: 1.2em;
font-family: sans-serif;
color: #2A873A;
padding-left: 25px;
}
Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.
Here is the screenshot of "bug" in action.
P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.
EDIT:
http://jsfiddle.net/burCR/
Have you tried specifying the font directly in your css? for example:
div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}
Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.
For extra help, please mention the name of the custom font, your full css and a live link to your site
Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
And if that doesn't work try taking the font you want from microsoft word and use #fontface to insert you custom font instead of using a websafe one.
And finally try using your font-family on the form and have the input inherit the font.
Hopefully this helped.
Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.
You can specify colors for both the background and the text individually.
input {
background-color: white;
color: black;
font-family: "My Fontface Font", Verdana, ms serif;
}