How do I get a bold version of a custom font? - html

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

Related

CSS Font issue on iOS Phone

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

Injecting CSS so websites use locally installed Google fonts

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.

including font face for bold not working

I've added the 'circular' font family to my site shown in the first code snippet below, but it doesn't add any bold, so I tried to include the bold .ttf and .woff for the bold 'circular' font but neither of my two approaches worked, the first approach made all the text bold and the second approach didn't do anything at all!
Here is how I added 'circular' to my asp.net mvc site's site.css file and it makes all the text circular, but not the bold
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
}
body {
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
color: #484848 !important;
}
Here I tried adding the bold but it makes everything bold
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
color: #484848 !important;
}
The last thing I tried was adding a new 'font-face' and including it in the body like this but it doesn't change any of my 'font-weight: bold' css to bold
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
}
#font-face {
font-family: 'Circular-bold';
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular, Circular-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
color: #484848 !important;
}

#font-face {
font-family: 'Circular';
src: url('../fonts/circular-book.ttf') format('truetype');
src: url('../fonts/circular-book.woff') format('woff');
}
#font-face {
font-family: 'Circular'; /*same name, yes*/
font-weight: bold; /*config its weight*/
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular; /*select font family normally*/
font-weight: bold; /*select family's bold font face*/
}
Or ask engine to generate (ugly) bold font face for us by font-synthesis:weight.
Here is an example showing how googlefonts configs font face.
#font-face {
font-family: 'Spectral SC';
font-style: normal;
font-weight: 400;
src: local('Spectral SC Regular'), local('SpectralSC-Regular'), url(https://fonts.gstatic.com/s/spectralsc/v2/yJ95fCBFs0v33GTJdYTk_zUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
#font-face {
font-family: 'Spectral SC';
font-style: normal;
font-weight: 700;
src: local('Spectral SC Bold'), local('SpectralSC-Bold'), url(https://fonts.gstatic.com/s/spectralsc/v2/J7mO0YbtyrIkp56FY15FDS_vZmeiCMnoWNN9rHBYaTc.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

below code'll work
#font-face {
font-family: 'Circular';
src: url('../fonts/circular-bold.ttf') format('truetype');
src: url('../fonts/circular-bold.woff') format('woff');
}
body {
font-family: Circular;
font-weight: bold;
}

How to include a specific font family not found at Google Fonts?

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

Mapping font-face to achieve the same font

#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?