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
Related
I installed several Google Fonts locally on a Windows box so that it will not have to connect to Google each time a website tries to use those fonts.
One of the fonts is Roboto, available from Google here: https://fonts.google.com/specimen/Roboto.
When I direct a web browser (Firefox) to open a web page that uses Roboto, it still goes to Google to download the font.
Here are two example URLs:
https://www.sitepoint.com/17-screencasting-tools-for-virtual-training/
https://www.belarc.com/
I figured that I possibly need to inject some CSS code to make this work, so I used userContent.css to inject some CSS into every page. Injecting the CSS code using a browser extension such as Stylus will have the same effect.
Here is the code I wrote:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
unicode-range: U+0-10FFFF;
src: local('Roboto-Regular');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
unicode-range: U+0-10FFFF;
src: local('Roboto-Italic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
unicode-range: U+0-10FFFF;
src: local('Roboto-Light');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
unicode-range: U+0-10FFFF;
src: local('Roboto-LightItalic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
unicode-range: U+0-10FFFF;
src: local('Roboto-Medium');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
unicode-range: U+0-10FFFF;
src: local('Roboto-MediumItalic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
unicode-range: U+0-10FFFF;
src: local('Roboto-Bold');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
unicode-range: U+0-10FFFF;
src: local('Roboto-BoldItalic');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
unicode-range: U+0-10FFFF;
src: local('Roboto-Black');
}
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
unicode-range: U+0-10FFFF;
src: local('Roboto-BlackItalic');
}
I see no errors in my code, but the site is still downloading the font from Google instead of using the locally installed font.
Where is my code failing, and how can my code be improved to make it work? Also, can my code be simplified in any way?
This one is working:
#font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
font-family: roboto-regular;
}
Important: make sure that the path (the './fonts/Roboto-Regular.ttf') is correctly point to your TTF file.
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?
My code is,
#font-face { font-family: Affogato-Light; src: url("fonts/Affogato-Light.woff2") }
#font-face { font-family: Affogato-Regular; src: url("fonts/Affogato-Regular.woff2") }
#font-face { font-family: Affogato-Medium; src: url("fonts/Affogato-Medium.woff2") }
#font-face { font-family: Affogato-Bold; src: url("fonts/Affogato-Bold.woff2") }
#font-face { font-family: Affogato-Black; src: url("fonts/Affogato-Black.woff2") }
Is there a #font-face or { font-family } short form for multiple subfonts, i.e. Light, Regular, etc.? Thanks!
Yes, there is.
It is known as Style linking. You can read more about it here
In your case, the code will turn like this:
#font-face {
font-family: Affogato;
src: url("fonts/Affogato-Light.woff2");
font-weight: 200;
font-style: normal;
}
#font-face {
font-family: Affogato;
src: url("fonts/Affogato-Regular.woff2");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: Affogato;
src: url("fonts/Affogato-Medium.woff2");
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: Affogato;
src: url("fonts/Affogato-Bold.woff2");
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: Affogato;
src: url("fonts/Affogato-Black.woff2");
font-weight: 900;
font-style: normal;
}
and later you can use it by applying following classes to the elements:
.u200 {
font-weight: 200;
font-style: normal;
}
.u400 {
font-weight: 200;
font-style: normal;
}
.u600 {
font-weight: 200;
font-style: normal;
}
.u800 {
font-weight: 200;
font-style: normal;
}
.u900 {
font-weight: 200;
font-style: normal;
}
You will apply font only once to the body:
body {
font-family: Affogato;
}
Not possible in CSS.
But you can use Mixin function in SAAS.
https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
I have used the CSS command
#font-face { font-family: myFont; src: url('MyFont.otf'); }
to install my own font on a HTML site.
Now, when I use the <strong> tag, I don't see a bold version of it. How do I do to make this work?
thanks.
You must create link on MyFontBold.otf . Italic, bold, medium, semibold, thin it's different files of font. Example
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
#font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 700;
src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
After this code you can use bold, italic and outher property of font
you can use font-weight..
#font-face {
font-family: "xyz";
src: url("xyz.ttf");
font-weight: bold;
font-style: italic, oblique;
}
use <b> bold </b> tag