Im trying to use a custom font using #font-face and for some reason its working on some places and not in others.
CSS
This works fine
#hero-header .title {
color: #fff;
padding-top: 225px;
font-size: 30px;
font-family: 'Populaire';
text-align: center;
font-size: 64px;
}
This doesn't
ul#reviews h2 {
font-size: 30px;
font-family: 'Populaire';
}
Notice the Hero area using a custom font but unable to use it further down the page, ie: the review titles.
Your CSS is:
#font-face {
font-family: 'Populaire';
src: url('font/Populaire.otf');
}
But, the font is actually in /beta/styles/css/fonts/Populaire.otf, please update your CSS to:
#font-face {
font-family: 'Populaire';
src: url('/beta/styles/css/fonts/Populaire.otf');
}
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
My website is not showing my fonts...
CSS Code is as follows...
#font-face {
font-family: 'IconicStroke';
src: url("fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
Please help...
It is showing in my machine but its not showing after uploading in the space....
There is no http://rgvnnemfl.com/iconic.css, which I'm guessing is where you have the above code. I think your link to the iconic.css is wrong.
If your css in css folder, then your fonts path may be
../fonts/iconic/iconic_stroke.eot
#font-face {
font-family: "IconicStroke"; src: url('../fonts/iconic/iconic_stroke.eot');
}
.iconic {
font-family: "IconicStroke", sans-serif;
}
This should work just fine.