I got the "Lato" google font and want to self-host it (because of performance). I got it implemented and it looks shitty and not smooth in any browser, it looks really pixelated!
#font-face {
font-family: 'lato';
src: url('font/latoFont.eot');
src: url('font/latoFont.eot?#iefix') format('embedded-opentype'),
url('font/latoFont.ttf') format('truetype'),
url('font/latoFont.woff2') format('woff2'),
url('font/latoFont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
html {
font-family: 'lato', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.4rem;
color: #212121;
}
What can i do to get more satisfying and smooth results?
I usually use this hotfix
/*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'MyFont';
src: url('fonts/myfont.svg#myfont') format('svg');
font-weight: normal;
font-style: normal;}
}
You can read more here
Related
There is a problem with fonts on iOS devices, these are the differences:
ANDROID/WEB IMAGE (correct)
IOS IMAGE (wrong)
The text appears to be in italics but I have never set it.
This is my font-face:
#font-face {
font-family: "Acumin Variable Concept";
src: url("font/Acumin/Acumin-Variable-Concept.ttf") format("truetype");
font-style: normal;
font-weight: 200;
font-display: swap;
}
#font-face {
font-family: "Acumin Variable Concept";
src: url("font/Acumin/Acumin-Variable-Concept.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
#font-face {
font-family: "Acumin Variable Concept";
src: url("font/Acumin/Acumin-Variable-Concept.ttf") format("truetype");
font-style: normal;
font-weight: 600;
font-display: swap;
}
#font-face {
font-family: "Acumin Variable Concept";
src: url("font/Acumin/Acumin-Variable-Concept.ttf") format("truetype");
font-style: normal;
font-weight: 900;
font-display: swap;
}
/* Typography */
p{
font-family:'Acumin Variable Concept';
font-size: 1.5rem;
text-align: justify;
line-height: 2rem;
font-weight: 400;
-webkit-font-smoothing: antialiased;
margin-bottom: 2rem;
}
b{
font-weight: 600;
color: var(--brand);
}
What could it be?
Thanks in advance,
Simone
you can try to set behind your font an "!important" like
font-family: "Acumin Variable Concept" !important;
regards
Jonas
I'm trying to figure out why the font for my logo isn't downloading for other people. The font is called Aerokids.
The code in my CSS works fine for the other font type I have on my site. It's just the logo that's not working, even though it's done the same way. Does anyone have any ideas what might be wrong? Here is a screenshot of the fonts I have in the subfolder for my site:
Here is the GitHub URL for the site I'm working on.
#font-face {
font-family: 'Aerokids';
src: url('fonts/Aerokids.otf');
font-weight: normal;
font-style: normal;
font-family: 'odudo-semibold';
src: url('../fonts/odudo-semi-bold.eot');
src: url('../fonts/odudo-semi-bold.eot?#iefix') format('embedded-
opentype'),
url('../fonts/odudo-semi-bold.woff2') format('woff2'),
url('../fonts/odudo-semi-bold.woff') format('woff'),
url('../fonts/odudo-semi-bold.ttf') format('truetype'),
url('../fonts/odudo-semi-bold.svg#youworkforthem') format('svg');
font-weight: normal;
font-style: normal;
}
.logo {
font-family: 'Aerokids';
font-weight: normal;
color: #00E8FF;
font-size: 2.5em;
float: left;
width: 30%;
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: middle;
margin: 0 auto;
}
You need to separate the two #font-face rules.
#font-face {
font-family: 'Aerokids';
src: url('fonts/Aerokids.otf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'odudo-semibold';
src: url('../fonts/odudo-semi-bold.eot');
src: url('../fonts/odudo-semi-bold.eot?#iefix') format('embedded-
opentype'),
url('../fonts/odudo-semi-bold.woff2') format('woff2'),
url('../fonts/odudo-semi-bold.woff') format('woff'),
url('../fonts/odudo-semi-bold.ttf') format('truetype'),
url('../fonts/odudo-semi-bold.svg#youworkforthem') format('svg');
font-weight: normal;
font-style: normal;
}
I want to use a font type called Daniel, but it's not found at Google Fonts.
Is there any way to use this type of font at my web site?
You have to download fonts files and delcare a font-face in your css.
You can check www.w3schools.com for more details. Here is an example :
#font-face {
font-family: Montserrat;
src: url("./fonts/Montserrat-Regular.otf");
font-weight: normal;
font-style: normal;
}#font-face {
font-family: Montserrat;
src: url("./fonts/Montserrat-Bold.otf");
font-weight: bold;
font-style: normal;
}#font-face {
font-family: Montserrat Light;
src: url("./fonts/Montserrat-Light.otf");
font-weight: normal;
font-style: normal;
}#font-face {
font-family: Montserrat Thin;
src: url("./fonts/Montserrat-Thin.otf");
font-weight: normal;
font-style: normal;
}#font-face {
font-family: Montserrat Medium;
src: url("./fonts/Montserrat-Medium.otf");
font-weight: normal;
font-style: normal;
}#font-face {
font-family: Montserrat SemiBold;
src: url("./fonts/Montserrat-SemiBold.otf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "EurekaSans";
src: url("fonts/EurekaSans-Regular.otf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "EurekaSans";
src: url("fonts/EurekaSans-Bold.otf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "EurekaSans";
src: url("fonts/EurekaSans-RegularItalic.otf");
font-style: italic, oblique;
font-weight: normal;
}
#font-face {
font-family: "EurekaSans";
src: url("fonts/EurekaSans-MediumItalic.otf");
font-weight: bold;
font-style: italic, oblique;
}
Here I am trying to map the different fonts according to font-weight and font-style, however it does not do the job.. It only uses the italic version. Anyone spot the issue?
I did buy Charter and Kievit for my website.
The fonts are ok and are the same used by Medium.com
I use Jekyll and the smoothing is ok in most browsers but Safari.
How can I obtain a font rendering that is closer to Medium.com. Their website has settled a landmark for web fonts.
This is how my website looks:
And this is how Medium.com looks:
I detect that my website fonts are more wider, more shorter and more thicker/blurry.
This is a part of my file `fonts.css``
#font-face {
font-family: 'Charter';
font-weight: normal;
font-style: normal;
src: url('../fonts/charter.eot');
src: url('../fonts/charter.eot?#iefix') format('embedded-opentype'),
url('../fonts/charter.woff2') format('woff2'),
url('../fonts/charter.woff') format('woff'),
url('../fonts/charter.ttf') format('truetype');
}
#font-face{
font-family: 'Kievit';
font-weight: normal;
font-style: normal;
src:url('../fonts/kievit.eot?#iefix');
src:url('../fonts/kievit.eot?#iefix') format('eot'),
url('../fonts/kievit.woff2') format('woff2'),
url('../fonts/kievit.woff') format('woff'),
url('../fonts/kievit.ttf') format('truetype');
}
Best regards,
This is part of the styling applied to medium.com titles:
font-size: 29px;
line-height: 1.04;
letter-spacing: -.028em;
font-weight: 700;
And article header lines:
line-height: 1.5;
letter-spacing: -.004em;
font-weight: 400;
Pay special attention to line-height, letter-spacing and font-weight
Have you inspected the elements from Medium.com? Inspecting the H3 of the title of the blog you've shared via Chrome Developer Tools, shows the following ccs rendered styles
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: medium-content-sans-serif-font, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Arial, sans-serif;
font-size: 32px;
font-style: normal;
font-weight: bold;
height: 36px;
letter-spacing: -0.64px;
line-height: 36.8px;
margin-bottom: 0px;
margin-left: -2px;
margin-right: 0px;
margin-top: 39px;
visibility: visible;
width: 702px;
word-wrap: break-word;