Whenever I want to change the font-size of my text, the font-weight seems to revert back to it's default value in what I see on the browser.
When I inspect it, both font-size and font-weight seem to be applied and working fine. Not sure what the issue is. When I disable the font type I have linked below, it seems to be working fine.
The thing is, I have been using the same font below, and this issue just started occurring overnight. No clue what could have changed. Thank you.
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#element {
font-weight: 700 !important;
font-size: 20px !important;
}
<div style="display: flex; flex-direction: column; width: 40vw; margin-left: 20px;"><div style="font-size: 24px; font-weight: 600;">Sell your clutter</div><div style="font-size: 20px; font-weight: 600;">Athens Locations</div><div style="width: 100%; height: 25vh;">House1</div><div>House2</div></div>
Did you changed or updated the browser that you usually uses ? Take a look at https://github.com/tailwindcss/tailwindcss/issues/1402
Similar thing happened with me. I tried multiple things, then I used Firefox instead of Chrome and it was working fine. Then only I came to know about bug.
Did you check that you're ID's and Classes matched the ones you set up in your HTML page. Either that or your browser might have the issue try updating it to the latest version if you haven't already. Because these days most of the CSS only works on modern browsers.
Related
I am using a particular font on my website. Firefox and Chrome recognize it on the PC (locally and server), but not on mobile (Firefox and Chrome). I am using #font-face in my CSS file.
I have the fonts uploaded on the server. I don't know what to try since it does work on the computer. Any help greatly appreciated.
Here is my HTML:
<div class="welcome">WELCOME</div><div class="home">HOME</div>
Here is my CSS:
#font-face {
font-family: 'typographicaregular';
src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
url('../fonts/typographica.regular-webfont.woff2') format('woff');
font-weight: normal;
font-style: normal;}
.welcome {
width: 47%;
padding: 0;
margin: 0 auto;
font-family: 'typographicaregular', sans-serif;
font-size: .7em;
letter-spacing: 26px;
text-align: center;
color: #004391;
}
.home {
width: 85%;
padding: 0;
margin: -40px auto 0;
font-family: 'typographicaregular', sans-serif;
letter-spacing: 12px;
font-weight: bold;
font-size: 1.6em;
text-align: center;
color: #004391;
}
It should show the actual font on my Android phone and iPad, not a generic san-serif font.
This seems like a duplicate from: #font-face Not Working in Chrome for Android
The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:
font-family: fghjkjh, 'jump_startregular', sans-serif;
...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)
In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the #font-face block instead, which probably causes problems with other older browsers.
"Taken word for word from the link mention above"
If this doesn't work, I suggest you use google fonts instead.
I'm starting a website build for a small business that uses Calibri as the primary font for their branding and I have come across an issue with using this font in certain web browsers.
In Google Chrome and Opera, the letters "ti" appear to be joined. When I apply some letter-spacing, they will not separate. This doesn't happen in Mozilla Firefox or Microsoft Edge.
Is there an issue with the font, or is it the browser?
Is there anything I can do to fix it?
I've created a snippet for testing (or you can test at https://codepen.io/whitenoise83/pen/KyXWWL)
#site-title {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
color: #e00b00;
font-size: 6em;
font-weight: bold;
/*letter-spacing: 0.25em;*/
}
<span id="site-title">Audiomation</span>
You can use font-variant-ligatures: none; in your CSS to prevent the browser using special ligature characters for some combinations of characters/letters.
See also this article: http://www.cssportal.com/css-properties/font-variant-ligatures.php
#site-title {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
font-variant-ligatures: none;
color: #e00b00;
font-size: 6em;
font-weight: bold;
letter-spacing: 0.05em;
}
<span id="site-title">Audiomation</span>
Never seen that but after some search :
Maybe a font ligature option to choose ?
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures
Hope its help ;)
I'm using a CFF font on my page, but it's showing serrated in the browser.
Here you can see how I'm using it: JSfiddle
HTML
<p>Hello everyb#dy!</p>
CSS
body{
font-size: 10px;
}
#font-face {
font-family: Planer_ExtraLight;
src: url('http://www.digitalpersone.com.br/projetos/fonts/planer_extralight.svg#Planer_ExtraLight') format('svg'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.otf'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.eot');
}
p{
font-family: Planer_ExtraLight;
font-size: 4em;
}
Anyone can help me with it?
This should work: http://jsfiddle.net/Allendar/aKGam/1/
p {
font-family: Planer_ExtraLight;
font-size: 4em;
font-smooth: subpixel-antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
Result
Update
Check the MDN. It seems to not work in most browsers. You might try to look into similar functions of -webkit-font-smoothing in other browsers to add to your styling.
The increase in quality I'm seeing in Safari is humongous tho!
Update 2
I found this might work in Firefox;
browser.display.auto_quality_min_font_size = 0; // default = 20
.. where lower means better quality and slower rendering and vice versa.
Update 3
This is interesting too (https://developer.mozilla.org/en-US/docs/CSS/text-rendering);
text-rendering: geometricPrecision;
On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used
I have done a lot of looking into this problem on my own and I know that this is a common problem with a lot of people, but many usually find a solution to their problem, however I cannot.
I'm currently using this font: http://fonts.googleapis.com/css?family=Questrial
And It renders perfectly on Windows 7 Firefox, Chrome, and IE. However, on Safari, the font weight is overly bold.
See comparison below:
Now this example is a major problem for the h6 tag:
h6 {
font-size: 14px;
line-height: 24px;
font-weight: normal;
font-family: Questrial;
-webkit-font-smoothing: antialiased; //This does nothing to help
margin-bottom: 10px
}
So is there even a fix?