So i'm trying to import a custom font located in /fonts/FONT.woff2 but when i add a new font family for it etc it just reverts the font to what i'm guessing is default ( Looks like Arial )
#font-face {
font-family: AvonValleyFont;
src: url(../fonts/FONT.woff2) format('woff2');
}
body {
background: #fff;
font-family: AvonValleyFont;
color:#4e4e4e;
line-height: 22px;
}
h5 {
font-size: 36px;
font-family: 'AvonValleyFont', 'Segoe UI', sans-serif;
}
Related
I have a design which uses DIV with flex, at https://jsfiddle.net/1s2mpba6/, but the main problem here relates to use of webfonts, one area, despite not having a webfont, seems to have been replaced even though the body font is used.
I get this when it should be Helvetica:
These are the areas of the HTML and CSS which seem to be problematic:
header.california-m {
background-color: #B22222;
border-radius: 10px;
color: #FFF;
padding: 30px;
width: 840px;
}
footer.california-m {
background-color: #333;
color: #FFF;
padding: 30px;
width: 840px;
margin-bottom: 20px;
}
footer.california-m h2 {
margin-left: 20px;
}
#font-face {
font-family: Fabriga Regular;
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.eot?v=1.1.0");
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.woff2?v=1.1.0") format("woff2"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.woff?v=1.1.0") format("woff"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.ttf?v=1.1.0") format("truetype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.svg?v=1.1.0#Regular") format("svg");
font-weight: 400;
font-style: normal
}
#font-face {
font-family: Fabriga Medium;
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.eot?v=1.1.0");
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.woff2?v=1.1.0") format("woff2"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.woff?v=1.1.0") format("woff"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.ttf?v=1.1.0") format("truetype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.svg?v=1.1.0#Medium") format("svg");
font-weight: 400;
font-style: normal
}
#font-face {
font-family: ATVFabriga;
src: url("https://c.atcdn.co.uk/fonts/ATVFabriga.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
.columns-vehicleresult+h1,
h2,
h3 {
font-family: Fabriga Regular, Helvetica, sans-serif;
}
.columns-vehicleresult .column p.autog1 {
font-family: Fabriga Regular, Helvetica, sans-serif;
}
.columns-vehicleresult .column p.autog1 b {
line-height: 16px;
}
.atc-type-picanto {
font-family: ATVFabriga, Helvetica, sans-serif;
}
<footer class="california-m">
<h2>1 Anytown Road, Anytown 1</h2>
<h2>☎ 555 0100</h2>
</footer>
However, I've not used a font-family for header or footer so why is this only happening to the footer and what do I need to fix?
Functionally, it works well, aesthetically, it's a small thing to fix, advice welcomed!
It should be in Helvetica as with the rest of the text for body declared in CSS, apart from the .columns-vehicle-result which use a webfont.
The content of your footer are two h2 elements, and the rule with selector .columns-vehicleresult + h1, h2, h3 applies to those.
If the formatting of that rule is supposed to only apply to headline elements that immediately follow a .columns-vehicleresult, for all three of those headline levels - then this would need to become
.columns-vehicleresult + h1, .columns-vehicleresult + h2, .columns-vehicleresult + h3 { }
I have been dealing with this issue all day and I can't seem to find a solution at all to why this is happening. The font family that I'm trying to set for the text on my website won't load on any other device at all, no matter what I try to do. It only loads on PC but nothing else that I test the site on. It's seriously annoying me.
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
#font-face {
font-family: "Roboto", sans-serif;
src: url("fonts/roboto-v20-latin-regular.eot");
src: url("fonts/roboto-v20-latin-regular.eot") format("embedded-opentype"),
url("fonts/roboto-v20-latin-regular.woff2") format("woff2"),
url("fonts/roboto-v20-latin-regular.woff") format("woff"),
url("fonts/roboto-regular.ttf") format("truetype"),
}
#font-face {
font-family: "Roboto Light", sans-serif;
src: url("fonts/Lightversion/Roboto-Light.eot");
src: url("fonts/Lightversion/Roboto-Light.eot") format("embedded-opentype"),
url("fonts/Lightversion/Roboto-Light.ttf") format("truetype"),
url("fonts/Lightversion/Roboto-Light.woff") format("woff");
}
body {
font-family: "Roboto", "Roboto Light", sans-serif;
margin: 0 auto;
background-image: url(../images/playstation-pattern.png);
background-repeat: repeat;
background-position: center;
}
.welcome {
height: 100%;
display: flex;
color: #404040;
font-family: "Roboto Light", sans-serif;
text-align: center;
line-height: normal;
}
.inner-welcome {
width: 300px;
margin: auto;
}
.welcome h2 {
margin-top: 0;
font-family: "Roboto Light", sans-serif;
font-weight: bold;
}
.welcome p {
margin-bottom: 0;
}
a:link {
text-decoration: none;
font-weight: bold;
color: #404040;
}
a:hover {
filter: brightness(1.75);
color: #404040;
}
a:visited {
text-decoration: none;
color: #404040;
}
i {
font-weight: normal;
}
Try this: Taken from the google fonts site, add the following to the head of your document:
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>
and then add the following in your stylesheet:
font-family: 'Roboto', sans-serif;
This should take care of the Roboto Font.
In terms of the Light font, confirm that the fonts are in the /fonts/ folder in your site directory. It looks like it's using a fallback.
Hope this works for you.
The Roboto don't family isn't imported properly. Here you have tried to import locally and remotely using Google font api. It is wrong. You should follow only one method of above.
The reason for issue occurs in all other devices and not in PC is that Roboto font has been installed to the PC. As other devices couldn't find Roboto font internally, they are trying to load that fallback font called sans serif.
Remove that import css rule and try to link Google font inside header tag of your index.html as shown below
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap">
I'm trying to use some customized font in my application.
So i tried downloading Pacifico and trying to use in my application. But getting Failed to decode downloaded font and the font is not loading
Below is my CSS .
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
This is not working. So i tried converting this to .woff as per suggestions found in web and tried below. Even this is failing. I'm using Chrome 74.0 version . How to solve this?
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf'),
url('#WORKSPACE_IMAGES#Pacifico.woff') format('woff'),
url('#WORKSPACE_IMAGES#Pacifico.woff2') format('woff2');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
Problem here is you need upload the font into /i/
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/i/Pacifico.ttf");
}
body {
font-family: "Pacifico", serif;
font-weight: 300 !important;
line-height: 25px !important;
font-size: 14px !important;
}
I don't know why Apex is not resolving the #WORKSPACE_IMAGES# but you can upload the font in the web server. In my case I'm using tomcat
I have a small, but immensely annoying problem.
I'm supposed to have a font-family for my h1, in the following fallback: BreeSerif, arial, sans-serif.
BreeSerif should be weight 400.
Arial should be weigth 700.
Sans-serif should be weight 400.
Now I have tried several things, but none seem to work.
First try:
This renders my BreeSerif to "normal", makes Arial to bold, BUT it seems impossible to render sans-serif to "normal" since I've declared the h1 to 700.
Second try:
Now since BreeSerif shall be normal, I could simply apply "sans-serif" to a #font-face and put it in font-weight: 700, but it doesn't work.
/* FIRST TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;'
h1 {
font-family:
BreeSerif,
bold-arial,
sans-serif;
}
/* SECOND TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
#font-face {
font-family: 'sans-normal';
src: local('sans-serif');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arial,
sans-serif;
font-weight: 700;
/* THIRD TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 400;
#font-face {
font-family: 'arialBold';
src: local('arial');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arialBold,
sans-serif;
font-weight: 400;
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
}
#font-face {
font-family: 'TradeWinds';
src: url('fonts/TradeWinds-Regular.ttf');
font-weight: 400;
}
}
#font-face {
font-family: 'sansnormal';
src: local('sans-serif');
font-weight: 700;
}
body {
width: auto;
background: #eee;
font-family: arial, sans-serif;
}
p {
font-family: helvetica;
font-size: 14px;
color: #222;
}
/* LÖS DENNA SEN! */
h1 {
font-family:
BreeSeri,
arial,
sansnormal;
font-weight: 700;
}
#ContentWrapper {
background: white;
width: 960px;
margin: auto;
}
Expected result: normal, bold, normal
Actual result: normal, bold, bold
Defining dimensions by using size-adjust for fallback fonts slowly hits mainstream according to:
https://caniuse.com/mdn-css_at-rules_font-face_size-adjust
See the current implementation percentage by today used browser
What does this mean?
You can use the following CSS definition:
#font-face {
font-family: 'Lato';
src: url('/static/fonts/Lato.woff2') format('woff2');
font-weight: 400;
}
#font-face {
font-family: "Lato-fallback";
size-adjust: 97.38%;
ascent-override: 99%;
src: local("Arial");
}
h1 {
font-family: Lato, Lato-fallback, sans-serif;
}
As you can see we define a fallback version of our webfont (in our case Lato) and this fallback version is just a refernce to "Arial", which is a safe web font. But with size-adjust we can tweak the size of the fallback font. The attribute ascent-override has the same implementation rate than size-adjust.
Getting the adjustment settings
But now you wonder, where do i get those adjustment sizes. This nice little page calculates them for you and gives you the complete CSS for the custom fallback font:
https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat
Google served font like Montserrat has a lot of different styles:
Thin, Extra-Light, Light, Regular, etc...
I could not find a way to specify a style with CSS.
Using Font-weight can access only some of them as can be seen in this CodePen
<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800'
rel='stylesheet' type='text/css'>
<p class="w100">This is 100 weight</p>
body {
padding: 0 20px;
font-family: 'Montserrat';
font-size:40px;
}
.w100 {
font-weight: 100;
}
I want to use the Extra-Light style, but regular is the lightest I get.
Is there a straight forward solution to this?
Update:
It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.
The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it for Montserrat (different fonts have different weights available):
HTML:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
Compare that to yours, it has redundant weights and two errors (href='// instead of href="https:// and hin instead of thin)
CSS:
font-family: 'Montserrat', sans-serif;
font-weight: 100;
If you want additional weights, add them like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">
Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page's load time.
Here is a working example for Montserrat. If 100 isn't thin enough for you, you're out of luck.
* {
font-family: 'Montserrat', sans-serif;
}
.w100 {
font-weight: 100;
}
.w200 {
font-weight: 200;
}
.w300 {
font-weight: 300;
}
.w400 {
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
</head>
<body>
<p class="w100">This is 100 weight</p>
<p class="w200">This is 200 weight</p>
<p class="w300">This is 300 weight</p>
<p class="w400">This is 400 weight</p>
</body>
</html>
After importing the font link from google fonts in your index.html. Create a global.css file consisting css code of Montserrat font family with different font weights.
I'm using this font in my react project.
import or link font from google fonts. Mine looks like this
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
It's very useful for you to go through the css file to use each variant in font family.
.thin {
/* Montserrat Thin = 100 */
font-weight: 100;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extralight {
/* Montserrat Extra Light = 200 */
font-weight: 200;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.light {
/* Montserrat Light = 300 */
font-weight: 300;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.regular {
/* Montserrat Regular = 400 */
font-weight: 400;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.medium {
/* Montserrat Medium = 500 */
font-weight: 500;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.semibold {
/* Montserrat Semi-bold = 600 */
font-weight: 600;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.bold {
/* Montserrat Bold = 700 */
font-weight: 700;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extrabold {
/* Montserrat Extra Bold = 800 */
font-weight: 800;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.black {
/* Montserrat Black = 900 */
font-weight: 900;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}