So I have a production project in laravel. The problem I'm facing is when I upload custom font to public directory (ttf, woff, woff2) and then in .css file specify #font family it does show up in CSS when I inspect element as font-family but font does not actually change.
#font-face {
src: url('/../fonts/custom-font.woff');
font-family: "custom-font" !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: "custom-font" !important;
In my case I had several problems. First of all I had !important which was not needed, but most importantly, the font i was using was wrongly formatted.
#font-face {
src: url('/../fonts/custom-font.woff');
font-family: "custom-font";
}
h1, h2, h3, h4, h5, h6 {
font-family: "custom-font";
}
It should have been like this, and make sure you double check font you are using
Related
I'm going mad as I had my website working with custom web fonts and now suddenly it just stopped working.
I got the web font kit from Font Squirrel and I'm using my local WP site to test it.
I pasted the font kit at wp-content/themes/twentyfifteen/fonts/
Here is the content from my style.css from the theme folder
#font-face {
font-family: 'quicksandregular';
src: url('/fonts/quicksand-regular-webfont.woff2') format('woff2'),
url('/fonts/quicksand-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h {
font-family: 'quicksandregular' !important;
}
And nothing happens in the web page. I can't see my custom font, which is Bebas Neue.
Any help will be much appreciated.
Regards.
Did you mean to paste the font family of "quicksand"? Regardless, this should be a good template to import new fontfaces.
#font-face {
font-family: 'quicksandregular';
src: url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff2') format('woff2'),
url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Then when you call your font, it will need to be done in a valid selector with a valid name, ie:
/* Style all Headlines */
h1, h2, h3, h4, h5, h6{
font-family: "quicksandregular";
}
You should also be using a fall back font stack like so:
/* Style all Headlines */
h1, h2, h3, h4, h5, h6{
font-family: "quicksandregular", Arial, Helvetica, sans-serif;
}
I'm really new to CSS and Ghost Blog Platform. I try to follow this instruction on how to customize the font of basic Casper theme.
However, the following line in the instruction seem not to work. With this line, icons disappear, and the font of texts behind icons also doesn't change.
[class^="icon-"]:before, [class*=" icon-"]:before
By the way, I try to change my font to Work Sans. Here is my full code.
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700,500,600' rel='stylesheet' type='text/css'>
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.page-description,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Work Sans", sans-serif; /* Replace with your own font */
}
</style>
Any suggestion is very appreciated!
I had the same problem and I found out what the problem was.
In ghost academy, it is said that we can change fonts with the code below.
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family:"Georgia", sans-serif; /* Replace with your own font */
}
But with that code, icons disappear as you said. To change the font without making icons disappeared, we can use codes like this.
<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer {
font-family:"Georgia", sans-serif; /* Replace with your own font */
}
</style>
<style>
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "casper-icons", "Open Sans", sans-serif;
}
</style>
Hope you solve the problem.
I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code:
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
:-ms-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::-webkit-input-placeholder {
font-family:some font name;
}
The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do with Chrome would make it not work!
You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
font-family: somefont;
}
::-webkit-input-placeholder {
font-family: somefont;
}
:-moz-placeholder {
font-family: somefont;
}
::-moz-placeholder {
font-family: somefont;
}
:-ms-input-placeholder {
font-family: somefont;
}
I'm using the #font-face function to use a custom font (Geosanslight) on my Wordpress site.
I have downloaded the webkit using http://www.fontsquirrel.com and uploaded them into the folder http://www.lynnepassmore.com/public_html/wp-content/themes/esteem/fonts.
I have then used the #font-face function in my custom css file to call them. However the font is not visible on any browser.
Here is my #font-face css:
#font-face {
font-family: 'geosanslight';
src: url('../fonts/geosanslight-webfont.eot');
src: url('../fonts/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/geosanslight-webfont.woff2') format('woff2'),
url('../fonts/geosanslight-webfont.woff') format('woff'),
url('../fonts/geosanslight-webfont.ttf') format('truetype'),
url('../fonts/geosanslight-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: geosanslight !important;
}
Check on your browser console :
Font from origin 'http://www.lynnepassmore.com' has been blocked from
loading by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://lynnepassmore.com' is therefore not allowed
access.
You're trying to load a font from a different domain (www vs without www) - it is considered as a distant resource, and blocked by the headers policy.
You can use relative path for your font if you include it from your css file, then it'll be relative to your css file location.
Your custom css is actually in the source code index, hence the relative path wont work. Change your font paths as follow.
#font-face {
font-family: 'geosanslight';
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf') format('truetype');
}
and
body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: "geosanslight",sans-serif;
}
please make sure your final css is like this
#font-face {
font-family: 'geosanslight';
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf') format('truetype');
}
body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: 'geosanslight', sans-serif !important;
}
I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code:
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
:-ms-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::-webkit-input-placeholder {
font-family:some font name;
}
The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do with Chrome would make it not work!
You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
font-family: somefont;
}
::-webkit-input-placeholder {
font-family: somefont;
}
:-moz-placeholder {
font-family: somefont;
}
::-moz-placeholder {
font-family: somefont;
}
:-ms-input-placeholder {
font-family: somefont;
}