The main text ("Elegance is sublime.") for the site doesn't have quite the right font for some reason. I am looking at my design and live version and they are different.
The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?
https://github.com/marcoantonio123456/Studio
Live version
How it should be
#font-face {
font-family: 'Stem-Regular';
src: url('components/typefaces/Stem-Regular.ttf') format('ttf'),
}
.headline-top { position: relative;
font-family: 'Stem-Regular', sans-serif;
font-size: 7.8em;
letter-spacing: 0.8px;
left: 90px;
top: 350px;
z-index:1;
The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?
Summary:
The font you have is not Stem Regular. Despite the file name claiming to be so.
Details:
The font in your (correct) screenshot is not the same font as on your website. Your website correctly displays the 'Stem-Regular' font as loaded from 'components/typefaces/Stem-Regular.ttf' . Whether this is actually the font with this name, is doubtful.
I have copied your font and used it on a word document and the font displays as your website does. There is nothing wrong with you code or the loaded font file.
The font you have - according to several online font depositories - is NOT the same as Stem Regular, or Stem Regular W03.
You can view Stem Regular W03 here: Fonts.com, Online Web Fonts note the a character is different to your website.
Solution:
Find the correct Stem Regular from another depository or chase up whoever you got this font from. We can not help you as this is not a code issue.
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;
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.
I am in a bit trouble now, because my design were accepted by the client and I've just started sitebuilding, when it came clear there is something wrong with my font set (Source Sans Pro).
Here it is: first image is my design, second is the live page:
On the third one, which is not the proper font weight, illustrates the probem better (the red text on the bottom). It looks like the font is not anti-aliased at all, all the strokes are 1 OR 2 px width, which makes the letters 'S' or 'G' ugly as hell.
It seems something is wrong with rendering, but I can't figure it out how to fix it. On the css side, I don't use anything special, here is the relevant code:
font-size: 13.5px;
font-weight: 900;
font-family: 'Source Sans Pro', sans-serif;
Also, I am using Google Fonts, by linking it this way (using latin-ext to get Hungarian chars):
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin-ext' rel='stylesheet' type='text/css' />
I have tried the following, without any success:
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
I did some research with the following one, which made a difference, but actually it the wrong direction:
-webkit-text-stroke: 0.35px;
So I am more concerned that this is a font-related issue rather then a browser-related one, but I don't know how to start.
Anyway, I would really appreciate if someone can help with this, because other ways my client will refuse the font, and I have to start over the whole thing.
Thanks!
Deleting WOFF2 as the #font-face src: significantly improved look. For the given screenshots it's not so obvious for the bolder text but in fact it looks better. For the lighter text the difference is drastic.
Browser: Chrome 80.
I created a fiddle trying to use Open Sans font with font-weight 300:
HTML
<span class="demo">example</span>
CSS
.demo {
font-weight: 400 !important;
font-family: 'Open Sans' !important;
font-style: normal;
font-variant: normal;
}
I use Google fonts to define the CSS
I can see a difference in Firefox (Ubuntu 13.10) when rendering at font-weight: 300 (light) and at font-weight: 400 (normal) but none in Chrome (Version 33.0.1750.117
), where everything looks like it's rendered at font-weight:400. Am I doing something wrong or is there a bug in Chrome? Is there any known workaround?
Update:
There is definitely something wrong with chrome I have two instances of the same page open in 2 different windows in Chrome. One is rendering the font ok (300 weight corresponds to the light variant) and one is not (300 weight is the same as the Normal variant). Any clues? I've made sure to refresh the page in each tab so they are actually the same page.
Update 2:
Attached screenshot: of the bug:
Update 3
This is not a duplicate of this. In that question the problem is that "Arial Black" and "Arial" are different fonts actually. In my case Open Sans is the only font and the problem is Chrome picking up the incorrect weight some times. As you can see from the screenshots, Chrome is not consistent with the font rendered even between two instances.
Add this to your CSS:
* {-webkit-font-smoothing: antialiased;}
This seems to be a Chrome/Chromium bug, caused by having the font installed locally on your system. Other browsers don't seem to suffer from this issue.
So far, it seems to occur on Linux and Windows (confirmed).
For some reason, it will just load your local font and ignore any of your font-weight rules, even if they're !important. It won't even be consistent with itself: the font weight can change randomly between tabs and page reloads.
The simplest workaround is to remove the font, but that could be an issue if you need it for something else.
You might also try renaming the font to something else in order to force Chrome to use your web font and honour your CSS font rules.
I was having this issue with a variable font. It was solved by defining a font-weight range in the font-face definition.
#font-face {
font-family: …;
font-weight: 1 999;
src: …;
}
Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me.
i overlaid them on top of each other and they look good on osx chrome.
font-weight: 400 !important;
beneath
font-weight: 300 !important;
http://jsfiddle.net/gpmXe/22/
My solution is download and install all the weight types of the font on your machine, or don't install it at all. That's odd solution, but works for me.
For me the solution was to include the CSS in the head-section instead of using #import inside the stylesheet.
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,700;1,400&display=swap" rel="stylesheet">
In HTML use this instead of using it in CSS. Best Solution 👍
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,700;1,400&display=swap" rel="stylesheet">
Doc for ital & wght
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;
}