We are working on a project and one of the participants has a problem with a Google font (Doppio One). The problem occurs in Firefox 33.1 with windows 8.1
On certain places he sees an icon instead of the letters (ft). I can't find the solution. I can only find topics where letters a being displayed instead of icons. But my problem is the other way around.
In another topic the same question is asked. Didn't notice it before:
DoppioOne-Regular.ttf Font does no support ft character in android
What i did:
Instead of inserting the font as a Google Font I downloaded the .ttf file and converted it into a webfont with Font Squirrel Webfont Generator.
Related
Im working on a HTML/CSS start page for a linux program I'm running. All my font-families were set to Arial, Verdana, Sans-serif in the css. When opening the page in Chrome or Firefox, the fonts displayed properly. Even running the windows version of the app with the same start page displayed correctly. But for whatever reason, the linux version displays the start page with all fonts replaced with courier. Its a very jarring font and I cant seem to get Linux to not default to it on this program. Ive tried changing the fonts in the css doc to Helvetica, or adding single or double quotes around each font family name, but nothing seems to change this. Does linux have some weird font quirk with css that I don't know about? any info is helpful.
Try using the Google Fonts API to ensure font consistency across platforms.
Find the fonts that you are interested in on Google Fonts, if they are available. Here are the steps for how to import them into your HTML document (internet connection required):
Go to Google Fonts
Use the search bar in the top right corner to find one of your fonts
Press the Plus (+) button next to your font
Repeat steps 2 and 3 for all of the fonts that you need
Click the Families Selected toolbar at the bottom of your screen
Select Embed
Select Standard
Copy the code block (highlighted in grey) and paste it within the <head> tags of your HTML document.
Specify the fonts that you want to use as instructed by the site (under Specify in CSS)
I'm using Chrome Version 68.0.3440.106 (Official Build) (64-bit) on macOS Sierra 10.12.6.
I have the following code:
<div class="emoji">☺️</div>
It's rendering this:
Instead of this:
It only happens with this specific emoji. All others work fine. Why?
If you are a developer trying to fix that on your website try adding some font-family to emoji. This one worked for same issue I had.
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
If you are the user, you can install chrome extension which handles emojis chromoji
I know that my answer is a bit late. But I've faced with the same problem and solve it through adding to my CSS file #font-face import. Also I've downloaded NotoColorEmoji font by Google. Here is page of this font. TrueType file is on it's github. So, after this even Chromium displays emojis on my site correctly.
The CSS properties in this answer were a good attempt at making emoji "just work", but as the blog post The struggle of using native emoji on the web illustrates, it can have unintended side effects.
One problem is that the fonts treat special characters like #, * and numbers as emoji. So you need to be selective about which parts of the text have the font-family applied, and be sure the text is actually something that should be unconditionally treated as emoji.
Even if it does appear to work, the emoji that will be shown varies by OS and browser, so it's inconsistent at best.
Ultimately, I gave up on trying to make emoji work for my use case.
I'm using this font: Google Font - Faster One
but it doesn't display correctly in Chrome (v59)
while on Firefox (and Safari), it shows correctly as on Google Fonts website
What I also don't understand is that it still displays correctly on Google Fonts website using Chrome but not on my website.
P.S. I'm aware that many similar questions have been asked before. But I still cannot find any clear solution for my case
The solution is to use the correct font weight. Faster One font on Google Fonts only has regular (400) weight (previously, in my CSS, I use 600)
I cannot get Font Awesome to work on any of my three Windows 10 machines. All my computers have been updated from 8.1. I don't know when it stopped working, here is what I do know:
Symptoms:
The font does not show. When double-clicked and opened with default Windows font viewer, it shows a default Arial-like typeface instead of slab serif Font Awesome
After installation, when browsed with Character Map - it again displays some kind of system-default font (and none of the icons)
Opened in Adobe programs it shows all alphanumeric characters and icons as blank square outlines.
So far I have tried:
Removing any and all font awesome files from the system and installing the font again
Installing just OTF, just TTF as well as both
Restarting, rebooting, system cleanup
Downloading older versions of the font
I am new to StackOverlow, so can't post images. Links below:
Double-clicking FontAwesome.otf file
Attempting to view in Character Map
EDIT: I had a friend with Windows 8.1 try it -- same problem!
One practical way is to convert .otf format to .ttf using Fontlab.
The solution is discussed here.
Font Awesome 5 is known to work on Windows 10. Here are instructions to install for Desktop Use. We recommend that you use the OTF files for desktop applications, because they support ligatures (i.e. type the icon name and the icon glyph appears).
I'm making a HTML banner with Edge Animace CC. I've set my font to droid-serif.
It works fine until I test it on a Nokia Lumia 610.
It gets replaced by a different font which replaces the character "Ž" with symbols.
So can I replace/set the substitute font with proper one in html which shows character "ž"?
First find out which font available in windows phone supports that character,and in your CSS font style append it along with droid-serif.
font-family: "droid-serif", "windows-phone-font-name" , serif;
If that don't work, you should try Web Fonts (maybe Google Web Fonts) that specifically supports your required character, and use that for it.
(** I would comment but I cannot yet **)