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;
}
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 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 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
#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 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