I've been trying for hours to use the Titillium Web custom font but haven't succeeded. Here's what I tried:
Adding the following line in the head part of the overall template
`<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700" rel="stylesheet">`
Adding the following in CSS
#font-face {
font-family: 'Titillium Web Bold';
src: url('data/fonts/TWeb/titilliumweb-bold-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-bold-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-bold-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-bold-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web BoldItalic';
src: url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web Italic';
src: url('data/fonts/TWeb/titilliumweb-italic-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-italic-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-italic-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-italic-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web Light';
src: url('data/fonts/TWeb/titilliumweb-light-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-light-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-light-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-light-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web';
src: url('data/fonts/TWeb/titilliumweb-regular-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-regular-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-regular-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-regular-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'Titillium Web Semibold';
src: url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff2') format('woff2'),
url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff') format('woff');
url("data/fonts/TWeb/titilliumweb-semibold-webfont.ttf") format("truetype"),
url("data/fonts/TWeb/titilliumweb-semibold-webfont.svg") format("svg");
font-weight: normal;
font-style: normal; }
Using the font on an html element
a.random {font-family: 'Titillium Web';} or a.random {font-family: 'Titillium Web', sans-serif;}
None worked.
Any idea ?
Thanks
#import url('https://fonts.googleapis.com/css family=Titillium+Web:300,400,400i,600,600i,700');
#f{
font-family: 'Titillium Web', sans-serif;
}
#s{
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
}
#t{
font-family: 'Titillium Web', sans-serif;
font-style:italic;
font-weight: 700;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="f">Sample</p>
<p id="s">Another Sample</p>
<p id="t">Last Sample</p>
</body>
</html>
Related
Why won't my custom font work for mobile but it works fine on desktop?
This is the code I put at the top of my css file:
#font-face {
font-family: 'NewYork';
src: url('fonts/NewYork.eot');
src: url('fonts/NewYork.eot?#iefix') format('embedded-opentype'),
url('fonts/NewYork.woff2') format('woff2'),
url('fonts/NewYork.woff') format('woff'),
url('fonts/NewYork.ttf') format('truetype'),
url('fonts/NewYork.svg#NewYork') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: 'Montserrat Alternates';
src: url('fonts/MontserratAlternates-Regular.eot');
src: url('fonts/MontserratAlternates-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/MontserratAlternates-Regular.woff2') format('woff2'),
url('fonts/MontserratAlternates-Regular.woff') format('woff'),
url('fonts/MontserratAlternates-Regular.ttf') format('truetype'),
url('fonts/MontserratAlternates-Regular.svg#MontserratAlternates-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: 'Montserrat Alternates';
src: url('fonts/MontserratAlternates-Light.eot');
src: url('fonts/MontserratAlternates-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/MontserratAlternates-Light.woff2') format('woff2'),
url('fonts/MontserratAlternates-Light.woff') format('woff'),
url('fonts/MontserratAlternates-Light.ttf') format('truetype'),
url('fonts/MontserratAlternates-Light.svg#MontserratAlternates-Light') format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
And this is how I style it:
*{
font-family: 'Montserrat Alternates', serif;
color: rgba(40, 40, 43, 1);
font-size: clamp(12px, 30vw, 18px);
font-weight: normal;
font-style: normal;
font-display: swap;
line-height: 1.7em;
padding: 0;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}
h1 {
font-size: clamp(15px, 9vw, 170px);
color: rgba(0, 142, 83, 1);
font-family: 'NewYork', serif;
font-weight: normal;
font-style: normal;
font-display: swap;
letter-spacing: 0.04em;
line-height: 7rem;
text-align: center;
}
link to site and what it should look like: https://robynloudang.github.io/Portfolio/index.html
[screenshot of the font on mobile][1]
[1]: https://i.stack.imgur.com/dWxsj.jpgstrong text
Your fonts aren't loaded at all(also in desktop view), as the path to your font directory isn't correct.
https://robynloudang.github.io/Portfolio/fonts/MontserratAlternates-Regular.woff2
works!
https://robynloudang.github.io/Portfolio/styles/fonts/MontserratAlternates-Regular.woff2
nope!404
You will also see a debug message in dev tools.
Just move your "fonts" folder in your "styles" folder or edit your #font-face declaration:
#font-face {
font-family: 'Montserrat Alternates';
src: url('../fonts/MontserratAlternates-Regular.woff2') format('woff2'),
url('../fonts/MontserratAlternates-Regular.woff') format('woff'),
url('../fonts/MontserratAlternates-Regular.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
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;
}
#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'm receiving the errors:
Failed to decode downloaded font and OTS parsing error: invalid
version tag
My code is inside my CSS file:
#import url("../fonts/roboto/roboto.css");
Then, inside the roboto.css file, I have the following code.
/* Roboto Fontkit (LOCAL)
-----------------------------------------*/
/*(1) Roboto-Regular-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-Regular-webfont.eot");
src: url("Roboto-Regular-webfont.eot?#iefix"), url("Roboto-Regular-webfont.woff") format("woff"), url("Roboto-Regular-webfont.ttf") format("truetype"), url("Roboto-Regular-webfont.svg#Roboto") format("svg");
font-weight: normal;
font-style: normal;
}
/*(2) Roboto-Italic-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-Italic-webfont.eot");
src: url("Roboto-Italic-webfont.eot?#iefix"), url("Roboto-Italic-webfont.woff") format("woff"), url("Roboto-Italic-webfont.ttf") format("truetype"), url("Roboto-Italic-webfont.svg#Roboto") format("svg");
font-weight: normal;
font-style: italic;
}
/*(3) Roboto-Medium-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-Medium-webfont.eot");
src: url("Roboto-Medium-webfont.eot?#iefix"), url("Roboto-Medium-webfont.woff") format("woff"), url("Roboto-Medium-webfont.ttf") format("truetype"), url("Roboto-Medium-webfont.svg#Roboto") format("svg");
font-weight: 500;
font-style: normal;
}
/*(4) Roboto-MediumItalic-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-MediumItalic-webfont.eot");
src: url("Roboto-MediumItalic-webfont.eot?#iefix"), url("Roboto-MediumItalic-webfont.woff") format("woff"), url("Roboto-MediumItalic-webfont.ttf") format("truetype"), url("Roboto-MediumItalic-webfont.svg#Roboto") format("svg");
font-weight: 500;
font-style: italic;
}
/*(5) Roboto-Bold-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-Bold-webfont.eot");
src: url("Roboto-Bold-webfont.eot?#iefix"), url("Roboto-Bold-webfont.woff") format("woff"), url("Roboto-Bold-webfont.ttf") format("truetype"), url("Roboto-Bold-webfont.svg#Roboto") format("svg");
font-weight: bold;
font-style: normal;
}
/*(6) Roboto-BoldItalic-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-BoldItalic-webfont.eot");
src: url("Roboto-BoldItalic-webfont.eot?#iefix"), url("Roboto-BoldItalic-webfont.woff") format("woff"), url("Roboto-BoldItalic-webfont.ttf") format("truetype"), url("Roboto-BoldItalic-webfont.svg#Roboto") format("svg");
font-weight: bold;
font-style: italic;
}
/*(7) Roboto-Light-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-Light-webfont.eot");
src: url("Roboto-Light-webfont.eot?#iefix"), url("Roboto-Light-webfont.woff") format("woff"), url("Roboto-Light-webfont.ttf") format("truetype"), url("Roboto-Light-webfont.svg#Roboto") format("svg");
font-weight: 300;
font-style: normal;
}
/*(8) Roboto-LightItalic-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-LightItalic-webfont.eot");
src: url("Roboto-LightItalic-webfont.eot?#iefix"), url("Roboto-LightItalic-webfont.woff") format("woff"), url("Roboto-LightItalic-webfont.ttf") format("truetype"), url("Roboto-LightItalic-webfont.svg#Roboto") format("svg");
font-weight: 300;
font-style: italic;
}
/*(9) Roboto-Black-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-Black-webfont.eot");
src: url("Roboto-Black-webfont.eot?#iefix"), url("Roboto-Black-webfont.woff") format("woff"), url("Roboto-Black-webfont.ttf") format("truetype"), url("Roboto-Black-webfont.svg#Roboto") format("svg");
font-weight: 900;
font-style: normal;
}
/*(10) Roboto-BlackItalic-webfont
.......................................*/
#font-face {
font-family: "Roboto";
src: url("Roboto-BlackItalic-webfont.eot");
src: url("Roboto-BlackItalic-webfont.eot?#iefix"), url("Roboto-BlackItalic-webfont.woff") format("woff"), url("Roboto-BlackItalic-webfont.ttf") format("truetype"), url("Roboto-BlackItalic-webfont.svg#Roboto") format("svg");
font-weight: 900;
font-style: italic;
}
I'm not sure what's causing the error I'm experiencing. This seems like it should be working perfectly fine.
I have not done modified the CSS file at all.
When you uploaded the font to your server, did you make sure you were in Binary Mode instead of ASCII (text)? That was my issue and uploading the files again in the correct mode resolved my 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