I 'm currently building a website for a language with another person and there is a problem, because a font is necessary to show the alphabet of this language, for which normal characters don't exist. But apparently, however I can view the font, he can't. It is possible for us to put a download-link to the font at our homepage, but I would prefer every user to see it immediately. The CSS is:
#font-face {
font-family: gothicw;
src: url("gothic.eot") /* EOT file for IE */
}
#font-face {
font-family: gothicw;
src: url("gothic.ttf") /* TTF file for CSS3 browsers */
Related
So, I am confused by this:
#font-face {
font-family:'rift';
src: url('../vendor/fonts/Fort Foundry - Rift-Bold.otf') format('otf');
font-style: 'normal';
font-weight: '700';
}
It lives in public/vendor/fonts/ and whats confusing is that unless I physically install the font - the font doesn't render properly.
I thought the whole aspect of using custom fonts was that the end user did not have to have them installed on their machine, that it should just work. Am I missing something when it comes to using custom fonts in css?
I get no errors in the console with or with out the font installed. Is there a way to verify that it is actually working? Or is that why we have things like fallbacks?
.site-name{
color: #fff;
font-size: 22px;
font-family: rift, sans-serif; // Fallbacks
}
Can some one explain the concept of using custom fonts and if I am setting it up properly in css? From a Laravel perspective.
You can host the font files on your server, to make use of a custom font on your site. Visitors are not required to have the font installed on their machine.
Make sure to choose a file name without spaces and special chars. You'll need to offer different formats of the font (like .eot, .woff2,...) to make it work across the different browsers and operating systems. Otherwise, the fallback font (in your case sans-serif) will be used.
Check out the article Using #font-face on CSS-Tricks. This is how your CSS could look like:
#font-face {
font-family: 'rift';
font-style: 'normal';
font-weight: '700';
src: url('../vendor/fonts/fort-foundry.eot'); /* IE9 Compat Modes */
src: url('../vendor/fonts/fort-foundry.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../vendor/fonts/fort-foundry.woff2') format('woff2'), /* Super Modern Browsers */
url('../vendor/fonts/fort-foundry.woff') format('woff'), /* Pretty Modern Browsers */
url('../vendor/fonts/fort-foundry.ttf') format('truetype'), /* Safari, Android, iOS */
url('../vendor/fonts/fort-foundry.svg#FortFoundry') format('svg'); /* Legacy iOS */
}
Troubleshooting
Visit your site and open the Developer Tools. Go to the tab Console.
Reload the page and look out for errors to make sure that the path to your font files is correct. If it's not, there will be an error 404 visible in the logs.
I've implemented the following font on my website.
/* Vivaldi Font */
#font-face {
font-family: 'vivaldi';
src: url('assets/fonts/vivaldi/vivaldi.eot');
src: url('assets/fonts/vivaldi/vivaldi.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/vivaldi/vivaldi.woff2') format('woff2'),
url('assets/fonts/vivaldi/vivaldi.woff') format('woff'),
url('assets/fonts/vivaldi/vivaldi.ttf') format('truetype'),
url('assets/fonts/vivaldi/vivaldi.svg#vivaldi') format('svg');
font-weight: normal;
font-style: normal;
}
I have applied these to my headers as follows:
/* Headers in Vivaldi */
h1,h2,h3,h4,h5,h6 {
font-family: vivaldi;
}
/* Page titles in Vivaldi */
.page-title h1, #page .page-title .entry-title, .page-title h1 > span {
font-family: vivaldi !important;
}
But I'm having some issues with the display of the font on mobile/tablet. When checking the preview via Google Developer tools, I see the following header styles: Screenshot from Google Dev tools. However, when actually checking the font on my iPhone 5, I see the following display: Screenshot from iPhone 5.
The font seems even worse on iPad. There, it seems like the font is displayed double printed. Here you can see some screenshots from iPad: Screenshot 1 & Screenshot 2
You can see the font weight seems less on the actual mobile device. Any ideas on how to resolve this issue? I tried to adapt the font weights for my mobile/tablet device, but this doesn't seem to work at all?
The problem with that "double" visualization of the fonts might depend on the attempt of IOS Browser to render the font itself as "bold" (that's indeed the way a lot of mobile browser render h1-h6 by default).
You should reset the font weight explicitily and check if it helps:
h1,h2,h3,h4,h5,h6 {
font-family: vivaldi;
font-weight: normal!important;
}
Seems like this was related to my theme settings. My typography settings were set on a font having font weight 800. However, I had overwritten the font-family in my custom CSS. What was not overwritten yet, were the font weights from the theme settings. As a consequence, the CSS tries to reproduce this font weight, although my font doesn’t have the ability to render this font weight. This gave the very strange font lay-out. So the solution of #holden would have worked, but I deleted the font weight from my theme settings instead.
However, I don’t understand why the font seemed correctly rendered on desktop, but not on mobile/desktop... maybe another format was selected depending on the browser (svg versus woff versus eot?).
The site runs perfectly on the desktop browser.
On a mobile phone browser, the site does not read the font files.
So I checked the CSS validator and found 2 errors, parse errors. I've tried a couple different things and can't seem to get rid of the parse errors. Here's the code that is faulty with the errors. The font file is stored locally.
Any advice would be appreciated.
#font-face {
font-family: 'trashhand';
src: url('TrashHand.ttf');
}
You can try to create a fallback system for the font-family usage. For example:
font-family:'Trashhand', 'Lucida Sans', 'Arial'
The main purpose for fallback system is to create alternative font usage, so if the browser doesn't support the first font it will try the next options.
You can try to import font in proper ways.
CSS TO IMPORT FONT:
#font-face {
font-family: 'TrashHand';
src: url('TrashHand.ttf') format('truetype'); /* Safari, Android, iOS */
}
CSS USAGE:
body{
font-family:'TrashHand', sans-serif;
}
Also, you can see here many possiblities to import different fontface for different browser and systems.
First of all, although the format hint is optional if your font is OpenType or TrueType, it's worth specifying it explicitly:
#font-face {
font-family: 'trashhand';
src: url('TrashHand.ttf') format('truetype');
}
Besides that, there were some problems with path recognizing on mobile devices. So you can include a / to the beginning of your font path and that might fix everything.
The last but not the least, consider using woff or woff2 that are compatible with major browsers.
I created a couple icon fonts with IcoMoon.
They work fine in all other browsers but some reason they are completely opaque in all versions of IE tested (8-11). Bootstrap's icon fonts look fine so it's something I must be doing or not doing.
You can see it in the upper left corner here: http://voicethread.com/new/myvoice/#browse
How it looks in different browsers:
My guess is there is an issue with the way that IcoMoon created the font files.
I'm having trouble rendering in Chrome, IE, and FF (respectively):
It appears the font is being delivered to the site okay:
Here are the relevant portions of your CSS file, which wouldn't hurt to include in the question:
#font-face {
font-family: 'vt-icons';
src: url('fonts/vt-icons/fonts/vt-icons.eot?ovc75f'); /* IE9 Compat Modes */
src: url('fonts/vt-icons/fonts/vt-icons.eot?#iefixovc75f') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/vt-icons/fonts/vt-icons.woff?ovc75f') format('woff'), /* Modern Browsers */
url('fonts/vt-icons/fonts/vt-icons.ttf?ovc75f') format('truetype'), /* Safari, Android, iOS */
url('fonts/vt-icons/fonts/vt-icons.svg?ovc75f#vt-icons') format('svg'); /* Legacy iOS */
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'vt-icons';
}
.icon-vt-logo-solid:before {
content: "\e600";
}
.icon-study: before {
content: "\e601";
}
If you try another content type like "\e601", it works fine. So I'm guessing it's the build for that specific item.
You can confirm this by downloading a font-viewer like FontForge and opening the .woff file:
It shows the same problem, so it's unlikely to be the browser.
If you double click on the icon, you'll see the exact vectors used to create it:
What's happening is that the circle and the VT logo are both rendered on the "fore" layer. Everything inside the circle is filled in, rendering the "VT" fill invisible. You easily see this by changing the shape of the circle and seeing the VT come out from "behind" it.
I'm not sure what the difference in circles was, but the twitter circle seems to be properly cancelling out the inner shapes. So you can copy and paste that circle into your other icon to get this:
Then just export and upload to your host
Just for good measure, I saved the changes, exported some of the relevant font files, and added them to GitHub so you can download them.
Until you add to your own host, this'll work:
#font-face {
font-family: 'vt-icons';
src: url('http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f') format('woff');
unicode-range: U+E600-E626;
}
Working Version! Yay!
By the way, You can also try adding a unicode-range for #font-family declarations so the browser only needs to download the characters it absolutely needs, like this: unicode-range: U+E600-E626;
Further Reading
http://css-tricks.com/snippets/css/using-font-face/
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
http://fontforge.github.io/en-US/
I have a .ttf font file that I need to use in my Angular.js application. I don't know how to import it and access it in my css files.
Could someone give me some direction in using this font file with Angular/CSS?
Including a font has nothing to do with angularjs. You have to declare it in a CSS file:
Take this chunk of my own as an example, declared in a stylesheet:
#font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.eot'); /* IE9 Compat Modes */
src: url('../fonts/DurantBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/DurantBold.otf') format('opentype'), /* Legacy iOS */
url('../fonts/DurantBold.svg#Durant-Bold') format('svg'), /* Legacy iOS */
url('../fonts/DurantBold.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/DurantBold.woff') format('woff');
font-weight: bold;
}
Remember that the paths are relative to the css file.
Today, most of the file formats are supported by most browsers - I don't know, concretely, the incompatibilities among browsers and fonts. This style is somewhat old.
Besides, I have all of those files (1 file per font, per format, per weight variation, per style variation - highly frustrating). You will not include configs for files you don't have.
If you have only .ttf files you only need this snippet in the .css file:
#font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.ttf') format('truetype');
font-weight: bold;
}
remember to actually include the css file where you declared this chunk, in the page where you will use it. If you use states (ngRouter / ui.router), then include the font in the MAIN page, not in the partials.
remember to have the font files (.ttf) in a location accessible by the declaration in this css file either being:
Absolute URL / CDN: this needs no explanation.
relative-to-site url: a path starting with / refers the path being relative to document root, as always.
relative url: a path not starting with / is relative to the current css file.
I know I wrote that many times but it always causes headaches when forgotten.