So I can specify my fonts in my website style CSS, and then set the font-family:
#font-face {
font-family: "custom-helvetica";
src: url("/assets/HelveticaNeue.ttf");
src: url("/assets/HelveticaNeueBold.ttf");
src: url("/assets/HelveticaBlkIt.ttf");
}
#font-face {
font-family: "custom-tahoma";
src: url("/assets/Tahoma.ttf");
src: url("/assets/Tahomabd.ttf");
}
html {
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
Here's an example piece of text:
Testing glyphs in PHP: ± µ ⁓ â ฿ ₿
So let's suppose that the font Helvetica contains all the glyphs in the example apart from ±, µ, ⁓ and that the font Tahoma contains all the glyphs in the example apart from â, ฿, ₿. Let's suppose that the font Arial contains every glyph in the example.
How does PHP/CSS work with this?
Will it apply Tahoma to the example and get this result? -
Testing glyphs in PHP: ± µ ⁓ ࠀ ࠀ ࠀ
Or will it decide that Arial is the only font that can render the entire string correctly, and apply that font to the whole string? Or will the font change dynamically throughout the string to adapt to any missing glyphs?
Related
I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
I use Bold, Medium and Normal font weights on my website, that's 700, 500 and 400 respectively.
I use Helvetica Neue font and as a fallback for systems that doesn't have it installed I want to use Open Sans. The problem is Open Sans doesn't have Medium style.
I want my elements that I used to define as font-weight: 500 have font-weight: 600 if the browser uses Open Sans. Is it possible somehow?
There's a similar question at Stack Overflow: How to set different font-weight for fallback font? but I'cant get the result I need using techniqe described in an accepted answer.
I need something like
#font-face {
font-family: 'semibold';
src: 'Helvetica Neue':500, 'Open Sans':600;
}
Not sure how to do it though.
You can't really define weight in a font-face declaration. Instead, font-weight is used there as a gatekeeper to match the font and not to pass styles to the element.
It seems like overkill, but you could use this JavaScript function by Sam Clarke as a starting point to see if the font is available, and then conditionally modify the font-weight following the logic that works best for your specific requirements.
For a simplified example with just these two fonts, you might set up the CSS like this:
#font-face {
font-family: h-semibold;
src: local('Helvetica Neue');
}
#font-face {
font-family: os-semibold;
src: local('Open Sans');
}
.semibold {
font-family: h-semibold, os-semibold;
}
.w5 {
font-weight: 500;
}
.w6 {
font-weight: 600;
}
Then, using the function linked above, you put something like this in your JS to conditionally load the weight classes depending on font support:
var semibold = document.querySelectorAll('.semibold');
if (isFontAvailable('h-semibold')) {
semibold.forEach(result => {
result.className += ' ' + 'w5';
});
} else {
semibold.forEach(result => {
result.className += ' ' + 'w6';
});
}
You'll doubtless work out a more elegant solution if you really need to carry it through.
Problem:
I'm attempting to use Abadi MT Condensed Extra Bold font. Unfortunately, I can't find any CDN's that provide this over an API. Is there something wrong with the css code that I'm using to pull in the fonts? I know for sure the stylesheet is being loaded.
Context
The font works when I have it turned on in my system's font book 100%, but not when disabled/removed -- but I understand that it's not practical to expect that every user is going to have that font. So given this, it does not work on an iPhone or Android device.
Am I better off finding a font in a CDN or, is it possible to make this work? Thanks!
Code:
****** fonts.css ********
#font-face {
font-family: 'serif';
src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
***** layout.pug *******
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')
title #{title}
//jquery
script(src='https://code.jquery.com/jquery-2.2.4.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')
//shopify
script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')
//custom cart
script(src="scripts/cart.js")
//popper
script(src='./vendor/popper/popper.min.js')
//bootstrap
script(src='./vendor/bootstrap/js/bootstrap.min.js')
//Favicons
link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
......
......
// Bootstrap core CSS
link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')
//Gliphicons had to be pulled in separately
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')
// Custom fonts for this template
link(href='./stylesheets/fonts.css', rel='stylesheet')
// Custom styles for this template
link(href='./stylesheets/template.css', rel='stylesheet')
Attempted Solutions
I've already attempted solutions like this. Also my CSS code used to not have the entire fonts.css file.
I was able to figure this out, posting for anyone else that has the same issue.
I found this blob to help
So now my final code is
#font-face {
font-family: AbadiBold;
src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
src:
url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");
font-weight: 400;
font-style: normal;
}
* {
font-family: AbadiBold
}
h1, h2, h3, h4, h5, h6, .text-heading {
font-family: AbadiBold
}
I have downloaded a font libertaion_sans that is keep inside a Wordpress theme under a font folder like this \fonts\liberation_sans
I saw lots of videos on Youtube and some links on StackOverflow, but I failed to include them correctly.
If I am not wrong we have to define these fonts in style.css before actually using this:
font-family
Can some one please help me.
Currently,
I am interested in using them →
font-family: LiberationSans-Bold;
Something like this => In your css file
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('/fonts/font.ttf'); /*URL to font*/
}
And use like font-family: 'YourFontName' in any css rule.
Cheers!
PD: Create each separatly.
#font-face {
font-family: 'LS-bold'; /*a name to be used later*/
src: url('/fonts/ls-bold.ttf'); /*URL to font*/
}
#font-face {
font-family: 'LS-Regular'; /*a name to be used later*/
src: url('/fonts/ls-regular.ttf'); /*URL to font*/
}
..etc...
And if you want to use the bold font, you have to font-family:'LS-bold'.
Understood?
In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}