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;
}
Related
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
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 running ASP5 / MVC6.
I'm including Bootstrap through bower, like this:
<link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css" />
When running my app, code snippets that utilize the glyphicons fonts do not work, such as this:
<span class="glyphicon glyphicon-calendar"></span>
It simply shows an empty rectangle.
If I use Chrome to debug my app, I can see that the fonts are not included in the Sources tab of the debugger... so how can I include those fonts from within my website?
Edit:
My bootstrap.css is default, so it has:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
And my directory structure matches this:
Change your bootstrap.css, and make sure the fontface src is pointing to the proper directory:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Just make sure you place the font folder directly under the project root and not nested inside bootstrap => dist folders.
This part '../fonts/glyphicons-halflings-regular.eot') in your CSS is trying to read the fonts from the root directory, But you don't have one in the root directory. Moving the folder as mentioned above should fix the issue.
I found the answer. My site's CSS file had this applied in it:
h1, h2, h3, h4, h5, h6, p, div, span, li, a {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }
This was overriding the font family of the span element, which is what glyphicons use.
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