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;
}
Related
I am beginner in a coding world and asking the first question in here, hope I will explain myself correctly!
I have uploaded Proxima Nova Regular and Open Sans Light via font face and included below styling in my css file. Both fonts work, but not the way they should be. Proxima Nova renders with much more weight on, in comparison to the one installed on my computer. Also both fonts don't pick up html bolding feature? to make text bold I need to specify font weight in css file, there is no other way? Not sure what the problem is. I have tried to find a solution but couldn't find any. Maybe it is something really basic that I haven't been able to grasp yet during my learning journey.
I have downloaded fonts with the Font Squirrel.
Fonts are based in a separate assets folder to my css file.
I have tried to clear my font cache multiple times and it didn't help.
I am working with Chrome however have the same issue with other browsers: Mozilla and IE.
This is a font I am after and I had it working on my pc, having proxima nova and open sans installed locally: https://www.katietreggiden.com/about
this is what i get via font face and web server: https://youmedigital.com/
Thank you for your help in advance:-)
#font-face {
font-family: "Proxima Nova";
src: local("Proxima Nova");
src: url("assets/fonts/Proxima Nova.woff") format("woff"),
url("assets/fonts/Proxima Nova.woff2") format("woff2"),
url("assets/fonts/Proxima Nova.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: "Open Sans";
src: local("Open Sans");
src: url("assets/fonts/Open Sans Light.woff") format("woff"),
url("assets/fonts/Open Sans Light.woff2") format("woff2"),
url("assets/fonts/Open Sans Light.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
body {
font-family: "Proxima Nova";
font-weight: 300;
color: #575757;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans";
font-weight: 300;
color: #000000;
}
I am using two fonts from font squirrel for this practice to style some of the my wordpress widget areas:Gothic and Playfair Display. But for some reason,only Playfair is being applyed and Gothic is being ignored.
Because its wordpress widget areas I cant actually display the html but basically the following is the CSS code which again works for one type font only:
CSS:
#font-face{
font-family: 'Playdisplay';
src: url('font/PlayfairDisplay-Bold.ttf') format('ttf'),
url('font/PlayfairDisplay-BlackItalic.ttf') format('ttf'),
url('font/PlayfairDisplay-BoldItalic.ttf') format('ttf'),
url('font/PlayfairDisplay-Italic.ttf') format('ttf'),
url('PlayfairDisplay-Regular.ttf') format('ttf'),
url('font/PlayfairDisplay-black.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: 'Goth';
src: url('font/GOTHIC.ttf') format('ttf'),
url('font/GOTHICB.ttf') format('ttf'),
url('font/GOTHICBI.ttf') format('ttf'),
url('font/GOTHICI.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
.mainfooter h3{
font-family: Goth, GOTHIC;
}
footer h1,
footer h2,
footer h3{
font-family: Playdisplay, PlayfairDisplay-Bold;
}
How can I use both fonts and apply anywhere in the site?
Try placing your font names in single quotes
.mainfooter h3{
font-family: 'Goth';
}
footer h1,
footer h2,
footer h3{
font-family: 'Playdisplay';
}
Also, you're using relative paths for your font files, check these are correct!
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've added a font face to my website using this code:
#font-face {
font-family: 'ChunkFive-Roman';
src: url('/css/font/ChunkFive-Roman.eot') format('eot'),
url('/css/font/ChunkFive-Roman.otf') format('opentype'),
url('/css/font/ChunkFive-Roman.woff') format('woff'),
url('/css/font/ChunkFive-Roman.ttf') format('truetype'),
url('/css/font/ChunkFive-Roman.svg#ChunkFive-Roman') format('svg');
}
This works okay on XP in all browsers except Safari:
Why is that, and more importantly, how can I fix this?
These fonts are available here.
found an article on this issue: WEBKIT (SAFARI 3.1) AND THE CSS #FONT-FACE DECLARATION
The CSS spec section for #font-face is very specific - typefaces are to be selected based on a wide array of criteria placed in the #font-face declaration block itself. Various textual CSS attributes may be defined within the #font-face declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two #font-face declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a font-family: attribute, it should refer to the basic Diavlo font defined in the first #font-face. However, if I were to do the same, but also specify a heavy font-weight:, then it should use the heavier version of Diavlo. To place this example in code:
#font-face {
font-family: 'Diavlo';
src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}
#font-face {
font-family: 'Diavlo';
font-weight: 900;
src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Diavlo';
font-weight: 900;
}
div#content {
font-family: 'Diavlo';
}
As you can see, my headings should use the typeface defined in Diavlo_Black.otf, while my body content should use Diavlo_Book.otf. However, in WebKit, this doesn’t work - it completely ignores any attribute except font-family: and src: in a #font-face declaration! Completely ignores them! Not only that - not only that - it disregards all but the last #font-face for a given font-family: attribute string!
The implication here is that, to make #font-face work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare completely imaginary, non-existent type families to satisfy WebKit alone. Here’s the method I have used in the places I current implement #font-face:
#font-face {
font-family: 'Diavlo Book';
src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}
#font-face {
font-family: 'Diavlo Black';
src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Diavlo Black';
}
div#content {
font-family: 'Diavlo Book';
}
Super easy question, I expect. I'm trying to upload my custom font to the server, like so:
custom.css.scss
p, ol, li, a, td, ul, h1, h2, h3, h4, h5, h6, label {
font-family: rockwell;
src: url('/assets/Rockwell.TTF');
text-align: left;
em {
font-family: rockwell;
font-style: italic;
src: url('/assets/RockwellItalic.TTF');
}
strong {
font-family: rockwell;
font-weight: bold;
src: url('/assets/RockwellBold.TTF');
}
}
I've tried putting those three TTF files both directly in app/assets (current attempt), and in app/assets/stylesheets. When I did the latter, I tried the src url as both /stylesheets/Rockwell.ttf and /app/assets/stylesheets/Rockwell.ttf.
None of these have actually worked. when my friend loads the site up in his browser, it's in another font. Any idea what I'm doing wrong? / How to fix it? If this is CSS3-only, how do I ensure I'm using CSS3?
EDIT -- I've been trying to figure out whether the app is having trouble finding the font file, so I've checked the network/fonts tab of inspect element. Whether or not I provide a real path (I've tried /stylesheetsRockwell.ttf by mistake), nothing shows up there at all.
EDIT -- possible way to wrap in bold and italic?
#font-face {
font-family: 'Rockwell';
src: url('<%= asset_path("Rockwell.ttf") %>');
font-weight: normal;
font-style: normal;
strong {
src: url('<%= asset_path("RockwellBold.ttf") %>');
}
em {
src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
}
What worked for me:
I added the fonts to a new assets/fonts/ directory, then added that to the assets path
config/application.rb
config.assets.paths << "#{Rails.root}/app/assets/fonts"
Then I declared a bunch of font-faces, which I individually assigned to items I wanted normal, bold, and italic:
typography.css.erb.scss
/* font families */
#font-face {
font-family: 'Rockwell';
src: url('<%= asset_path("Rockwell.ttf") %>');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Rockwell Italic';
src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
#font-face {
font-family: 'Rockwell Bold';
src: url('<%= asset_path("RockwellBold.ttf") %>');
}
p, ol, small, ul, li, td, th, h3, h4, h5 ,h6, label {
font-family: Rockwell; # The elements I wanted defaulted to normal
}
h1, h2, a, strong {
font-family: 'Rockwell Bold'; # The elements I wanted defaulted to bold
}
li {
small {
font-family: 'Rockwell Bold'; # Subset I wanted defaulted bold
}
}
em {
font-family: 'Rockwell Italic'; # Manual italic
}
# Whenever I wanted italic or bold, I did it through font-family for consistency.
This meant turning all css files into css.erb.scss files, so they understand "<%= asset_path"
In a Rails project, I strucutre the fonts as i do with stylesheets or images :
style/stylesheet/myStyle.css
style/images/myImage.jpg
style/fonts/myFont.ttf