We are using SF Pro font, free font provided by Apple. If font is installed on my or the users computer, then it will be used when loading of our website.
We have styles like:
.public-url {
font-family: SFPro-Regular;
font-size: 14px;
color: #57606a;
}
But if font is not installed on computer, then fallback font is used. How can I avoid using fallback font and use SF Pro?
I put font into project folder /public/fonts/SF-Pro.ttf and created this in global.css.
#font-face {
font-family: 'SFPro-Regular';
src: url(/fonts/SF-Pro.ttf);
font-display: swap;
}
But if I remove In my Mac the installed SF Pro font, browser will not load it. Why?
Tried this also:
#font-face {
font-family: SFPro;
src: url(/fonts/SF-Pro.ttf);
font-weight: normal;
font-display: swap;
}
Related
It's reasonably common for sites I'm building to use the semibold weight of a given font for their "bold" variant. Usually, this is very easy to set up by using a custom #font-face declaration that points at the semibold files and has font-weight: 700;.
That's fine when the fonts are available under a free licence, and can be hosted directly alongside the website. Sometimes, however, the fonts I need to use are only available under a paid licence. My employer pays for a subscription to Adobe Fonts to give us access to these fonts.
However, Adobe Fonts sets up its own #font-face declarations in the CSS files it provides for a given web project, and for semibold weights it uses the standard font-weight: 600;.
Unfortunately I've found very little information online about using #font-face with Adobe Fonts (or Typekit, which it used to be called). The closest thing I found on Adobe's own website (https://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html) doesn't say anything about using #font-face with Adobe Fonts/Typekit.
I don't trust the file URLs Adobe Fonts uses in its CSS to remain static, so I don't think I can reuse them in my own CSS without risking breaking the fonts once those URLs are no longer correct.
Is there any way in CSS I can do something like create a new #font-face declaration based on a previous one created in an imported CSS file, or modify a #font-face declaration that was included this way? I'd much rather just set up the font to use its semibold files when the browser thinks it should be bold, instead of telling the browser to use the semibold font-weight where it would would normally use bold.
For anyone else running into this issue, the solution I've gone with for now is to create my own #font-face declaration using the URLs from Adobe Fonts' CSS file, but with a different name for the font family.
I'm using the Adobe Fonts font family as a fallback for if the one I've created doesn't load, so if the URLs break it should at least fall back to the one Adobe Fonts has set up with the font weights that don't match what I need.
/* Here Adobe Fonts uses #font-face to create the font family "adobe-font" */
#import "https://use.typekit.net/<my-project-key>.css";
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/regular.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/regular.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/regular.ott") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/italic.ott") format("opentype");
font-weight: 400;
font-style: italic;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold.ott") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold-italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.ott") format("opentype");
font-weight: 700;
font-style: italic;
font-display: auto;
}
.my-class {
font-family: "Custom Font", "adobe-font", sans-serif;
}
It's not perfect, but since I haven't been able to find any assurance from Adobe that their font file URLs will never change this at least gives me some security if they do change.
As far as i am aware if you use the option "swap" for the property "font-display", Apple Mac uses Helvetica as fallback font and Windows Arial. Is it possible to define my own web-safe font like "Tahoma"?
Example code:
#font-face {
font-family: 'MyFancyFont';
src: local('MyFancyFont'), url(/fonts/MyFancyFont/MyFancyFont.woff2) format('woff2');
font-display: swap;
UseMyCustomFallbackFont: Tahoma
}
I believe this is done in the font-family definition, not the #font-face itself.
ex.
.my-text{
font-family: MyFancyFont, Tahoma;
}
This will show Tahoma until MyFancyFont is loaded.
You can get even more specific control if you use something like Webfont loader.
https://github.com/typekit/webfontloader
Background: In an internal web app I am using the Google font, Open Sans. I have the font file downloaded and bundled with the app (the app has to work offline). Recently I noticed Google had a newer version of the font, at which point I re-downloaded it and updated it in the app. At this time I also changed the way I include the font in my CSS, dropping it to just use the .woff and .woff2 formats (only need to support IE11 and Chrome)
Problem: Since this update on my own computer on our test server, in IE only, all text is shown looking bold. In Chrome it is fine. In IE when looking at it in my local copy with localhost, the font works fine. On other computers it works fine all the time. I've only seen one other computer so far have the same issue.
If I inspect element, it is correctly set to use font-weight: 400 and correctly uses the .woff file for IE11. It just seems to be using the bold version of the font instead of the regular version.
I am worried this is happening to a lot more of my client's computers now that I know it is not just mine only.
Code: The below is the code I use to import the font. The only difference between this and what I had before is that I'm no longer importing SVG and other formats.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff?v=1.5.0) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff?v=1.5.0) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff?v=1.5.0) format('woff');
}
More details: The web app uses Angular 5 (using the Angular CLI), SASS, and gets deployed via Jenkins on a Tomcat Windows server. The test server is currently being ran in development mode.
I have already tried to clear all the cache in my browser and have restarted my computer several times, but nothing fixes it.
I unfortunately can't link to the app as it is internal only.
Below is a screenshot of the differences when viewed on the test server and when on localhost:
I think this could be the result of any number of things so if I need to provide additional information please let me know.
i want to know the most convenient and standardized Arabic font for web applications,,used as messages to alert the end user..
It is safe to use fonts like Arial, Tahoma, Times New Roman as all of these support Unicode and Arabic very well. I have myself been looking and did a research & finally decided to use any of the following fonts Arial, Tahoma, Times New Roman these are web safe fonts also. If your application is based on intranet then you can use a font of your choice if administrator is willing to install same font on all system, either you also have choice of using custom fonts by embedding. Example below is for IE
#font-face {
font-family: Goudy Stout;
font-style: normal;
font-weight: 700;
src: url(GOUDYST0.eot);
CSS3 font Embedding
#font-face
{
font-family: yourFontName ;
src: url( /location/of/font/FontFileName.ttf ) format("truetype");
}
/* Then use it like you would any other font */
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
}
You can read details about Font Embedding in details on internet. I have quickly put this solution together for reference.
So I have this stack:
#font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.ttf') format('truetype');
}
body { font-family: Helvetica, MyCustomFont, Arial, sans-serif; }
Is MyCustomFont.tff loaded by browser even if Helvetica is present in the machine (ie: Mac Users)?
You need to use the local directive to test for the locally installed version of the font. If it is not found, the next font in the list will be tested for, and loaded if available. For example:
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
The above example was taken from here:
https://developer.mozilla.org/en/css/#font-face
There's some more information here:
http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/
Once a font has been downloaded, it will be cached by the browser. Once in the cache, it will not be necessary for the browser to download the font again, thereby speeding things up. See here for more information:
http://code.google.com/apis/webfonts/faq.html#Performance
Jake Archibald gave a very good talk about this in the Dibi 2011.
You can see here: http://vimeo.com/27771157 min. 11:59
And here: http://speakerdeck.com/u/jaffathecake/p/in-your-font-face?slide=39