I'm currently loading two fonts from a qrc file. One of them is .ttf and the other is .otf. When I test my build on Android, they load and work fine (although the loading time is fairly long..)
However when I test it on my iPhone and/or simulator, none of the fonts load at all. They just seem to default back to Arial or something. Furthermore, only the .otf file works fine on Windows. The .ttf file defaults back to Arial and the characters are offset by 2 characters (so the word "ok" would be "qm")
What the hell is going on?
The fonts are located in:
"qrc:/fnt/res/fnt/MuseoSans_500.otf"
"qrc:/fnt/res/fnt/museo100-regular.ttf"
and I'm using this to load the fonts:
FontLoader {
id: museosans500
source: "qrc:/fnt/res/fnt/MuseoSans_500.otf"
}
FontLoader {
id: museo100
source: "qrc:/fnt/res/fnt/museo100-regular.ttf"
}
When accessing the fonts I set the font.family to museosans500.name and museo100.name. Like I said, they work fine on Android. But neither work on iOS, and only one of them works on Windows.
I'm using Qt Creator 3.4.0 and Qt 5.4.1.
Any help is much appreciated!
So I didn't solve it for Windows but this is an application for iOS and Android.
Basically I loaded the fonts through main.cpp instead with:
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
// Load custom fonts
if(QFontDatabase::addApplicationFont(QStringLiteral(":/fnt/res/fnt/MuseoSans_500.otf")) == -1)
qDebug() << "Failed to load font Museo Sans 500";
if(QFontDatabase::addApplicationFont(QStringLiteral(":/fnt/res/fnt/museo100-regular.ttf")) == -1)
qDebug() << "Failed to load font Museo 100";
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/res/qml/LoadScreen.qml")));
return app.exec();
}
Originally this didn't actually work. But that's because I was setting the font.family to be "Museo Sans 500" and "Museo 100" since that is what Windows would print in console when I asked for a full list of available font families.
When I printed out the font families list in Android, Mac and iOS I actually got "Museo Sans" and "Museo" respectively. Changing the font.family to those strings worked fine.
Unfortunately I have found no solution for Windows yet, but like I've said that doesn't matter to me.
Related
I'm using the GNU texinfo package to generate both PDF and .info files from a .texi file.
I'm trying to update an old .texi file (not changed since 2001) and generate the same PDF output. I've resolved a number of issues, but there are a couple outstanding. In the old PDF, the title was in Helvetica and body text is Liberation Serif. In the new PDF, both are Computer Modern.
I've read everything that I can find about fonts, but I'm not able to change the fonts. Nothing that I do seems to work. Everything I have tried generates errors.
In my .texi file, before any \setfont directives, I have \def\fontprefix{uh} which, if I read the pdftex.map file correctly, should select the NimbusSanL font set (e.g. uhvr8a.pfb). I get the following errors:
mktexnam: Could not map source abbreviation for uhss10.
kpathsea: Running mktexmf uhss10
! I can't find file uhss10'.
<*> ...ljfour; mag:=1; ; nonstopmode; input uhss10`
Does anyone have a example .texi file which sets the font family to use? Or an explanation of what I'm doing wrong?
I wanted to use a custom font in my react-native project, but I got an error on ios simulator
How can I solve it
I tried every way but I couldn't find a solution.
Unrecognized Font Family: sfproregular
Error: Error Screenshot
Project Structure:
Project structure screenshot
react-native.config.js
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
versions
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-gesture-handler": "^1.7.0",
"react-native-phone-input": "^0.2.4",
"react-navigation": "^4.4.0"
I wanted to use the font in "Welcome.js"
Welcome.js
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
StatusBar,
TouchableOpacity,
Button,
ImageBackground,
} from 'react-native';
import Logo from '../components/WelcomeLogo';
import arkaplan from '../assets/images/arkaplan.png';
export default class Welcome extends React.Component {
render() {
return (
<>
<ImageBackground source={arkaplan} style={styles.constrain} >
<StatusBar barStyle="light-content"/>
<Logo />
<Text style={styles.welcome} >Welcome!</Text>
</View>
</>
)
}
};
const styles = StyleSheet.create({
constrain: {
flex: 1,
alignItems:'center',
justifyContent:'center',
welcome: {
fontSize: 50,
color: 'white',
fontFamily: 'sfprogregular',
marginTop: 20,
marginBottom: 5,
},
});
Much like you I experienced this Unrecognized Font family issue when running the iOS build via Terminal. For whatever reason, it doesn't effect the final archive build or if one runs the build via Xcode. This is on the latest RN 0.63.3 in macOS Catalina 10.15.7 with Xcode 12.0.1.
The issue was with the font name itself.
Solution Summary
In your case, I recommend the following steps to take.
Install your font sfprogregular on your macOS system
With the font installed, and selected in Font Book press CMD+I to see postscript name
Rename the font files in your project to their respective PostScript names
Run npx react-native link in your project to setup the renamed fonts
Do cleanup of the older font files prior to the rename (remove old fonts)
Change the name of the font to the postscript name in code when referring to the font in styles
My experience detailed
In my case, we are using TradeGothic.
Initially, when we linked the font, the name of the font file itself was:
Trade Gothic LT.ttf
Android is fine with this, but not iOS. That's because Android relies on the filename, but iOS depends on the PostScript name of the font.
To fix this, I renamed the ttf file to it's postscript name TradeGothicLT.ttf. For the bold one which was Trade Gothic LT Bold.ttf I renamed it to TradeGothicLT-Bold.ttf.
I then did npx react-native link inside my project to connect my newly renamed fonts. Then, I cleaned up by removing the older .ttf files from the XCode project under resources (just press delete on each of the red font files that are no longer there) and removed the font files from the older Android link process in the folder /android/app/src/main/assets/fonts/. In the info.plist file, under the section UIAppFonts remove the older font filenames.
Finally in code, instead of referring to 'Trade Gothic LT' we now refer to it as 'TradeGothicLT'. That's it, it works now!
You can find the postscript name of the font by installing the .ttf file (double click it) on macOS and in Font Book with the font selected press CMD+I to get information about the font.
NOTE: It's not necessary to install the font to macOS, it's just the only way I know of to get the PostScript name. If you already have the PostScript name of the fonts, you don't need to install them.
I hope this helps you and others that might stumble upon this issue!
After adding the custom fonts, you need to link it using react-native link.
That will create an entry in Info.plist file (iOS) & android/src/main/assets/fonts/ directory (Android).
If the above command fails, you need to add those fonts manually in the android directory & plist file.
Sometimes your font name is not the same for Android and iOS (since iOS uses postscript name as fontFamily). In most cases, in android, the font is the same as the file, for example, I had this problem when using HelveticaNeueLTPro-BdEx font in iOS.
I am sharing the fix that helps me out.
Run npx react-native link. Maybe you already did.
Add this inside the didFinishLaunchingWithOptions method on your AppDelegate.m:
for (NSString *familyName in [UIFont familyNames]){
NSLog(#"Family name: %#", familyName);
for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]) {
NSLog(#"--Font name: %#", fontName);
}
}
Then, when you launch your app with xcode, you will be able to see all the fonts installed on your app, so you just have to use it the way it is listed on your console:
You can add fontFamily based on OS like:
Platform.OS == 'android' ? 'Linotype - HelveticaNeueLTPro-BlkEx' : 'HelveticaNeueLTPro-BlkEx'
Or you can rename the font file name and then run npx react-native link again and also maybe have to delete the previous UIAppFonts entry for the previously linked font in Info.plist file.
In my PDF download, I need to have the possibility to use both english and chinese as languages for the inserted text, but while english works I cannot make chinese to work.
I followed the documentation from here, but no matter what fonts I try to use the newly added ones always display as empty boxes, more exactly something like this [][][][].
The steps I've took are the following ones:
Downloaded the SC (and TC) fonts from the google fonts page
Converted the Regular file of the font family from .otf to .ttf using online converters (multiple sites since I've thought maybe the convertor has a problem). This resulted in two aprox. 10kb files (one for TC and one for SC).
Using the script.sh from the pdfmake documentation page, I've converted the .ttf fonts to a vfs_fonts.js, which successfully created an object that contains the font name as key and a base64 string as value
Added the necessary code to my pdf exporting service after moving the vfs_fonts.js file in my assets folder
Yet the boxes are still empty. This is my service code, where pdfFonts.pdfMake.vfs references the newly created vfs file and defaultStyle of the docDefinition is set to font: "NotoCh".
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
NotoCh: {
normal: 'NotoSansSC-Regular.ttf',
bold: 'NotoSansTC-Regular.ttf',
italics: 'NotoSansSC-Regular.ttf',
bolditalics: 'NotoSansTC-Regular.ttf',
},
};
I used both SC and TC files because initially I thought I was using the wrong chinese characters, but it doesn't matter which ones I use, it still doesn't work, and I receive no error in the console or at compile time. What am I missing in here?
EDIT: These are the characters I am trying to display, as an example: 简体中文体中文
It looks like this is a bug related to Noto fonts present in the latest pdfkit version 0.11.0, which was seemingly fixed in pdfkit-next. Link to the bug
Not sure if you've solve your problem yet. I had the same issue before and I finally solved the problem after trying out many solutions posted online: So what you have been doing is correct and will work, as long as you include your custom font as the new default font style in your document definition. I have included my test html code below for your reference.
Note: The custom font file doesn't have to be in .ttf format. I'm using Noto Sans SC from Google Fonts and the .otf files work just fine. (I'm using pdfmake v0.1.68).
<!DOCTYPE html>
<html>
<head>
<title>PDFMake with Chinese Font</title>
<meta charset='utf-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="vfs_fonts.js"></script>
</head>
<body>
<div id="test">尝试加入简体中文</div>
<script>
pdfMake.fonts = {
NotoSansSC: {
normal: 'NotoSansSC-Regular.otf',
bold: 'NotoSansSC-Bold.otf',
}
};
var docDefinition = {
content: document.getElementById('test').innerHTML,
defaultStyle: {
font: 'NotoSansSC'
}
}
pdfMake.createPdf(docDefinition).download();
</script>
</body>
</html>
problems to print with different fonts on my Zebra ZQ520:
as described in documentation, I've downloaded some new font through the official Zebra Font Downloader program, comic and verdana. After this, I found the new fonts in E: storage area. So the script:
^XA^HWE:^XZ
give me:
LIST OF FONT LINKS
- DIR E:.
* E:COMIC_02.CPF 7359
* E:VERDAN02.CPF 163 ....
- 66589184 bytes free E: ONBOARD FLASH
and trying to print example string from font downloader program, it print with the installed font with success.
The problem appens if I try to print a label. The printer seems not consider the .CPF files in ZPL commands.
My tests, without success, are:
1) following the procedure indicated in https://km.zebra.com/kb/index?page=content&id=SO7891 , assigning a designator to new font, with the script:
^XA^CWQ,E:COMIC_02.CPF^XZ
and trying to print something as:
^XA^FO50,50^AQN,50,50^FDSAMPLE CoMiC^FS ^XZ
seems not working (is it not possible to assign a designator on .CPF files??)
2) (not working too) test, I tryed to print something with the ^A# command, also without success. Example:
^XA^FO50,50^A#N,50,50,E:COMIC_02.CPF^FDSAMPLE CoMiC^FS ^XZ
Where is the problem? with printer (updated with the last firmware, V76.19.15Z)?
or ZPL can't print font stored in .CPF files?
or ..??
thanks!
The ZQ500 supports multiple printing languages. It ships with the PnP string stating that it is a CPCL printer. This tells the Zebra Setup Utility to generate a CPCL compatible font (.CPF). Since you are looking to print using ZPL you need to generate a font compatible with ZPL.
https://km.zebra.com/resources/sites/ZEBRA/content/live/SOLUTIONS/8000/SO8535/en_US/ZebraNet_Bridge_Font_Converting.pdf
This will use a different program to package a .ttf font for the printer. ZPL has support for truetype fonts so you will have better scaling of the font.
The ^CW and ^A# commands will both work with the ttf font.
I am using ABCPDF to print a PDF file to a local printer via EMF file. I've based this very closely on ABC PDF's sample "ABCPDFView" project. My application worked fine on my Windows 7 and Windows XP dev boxes, but when I moved to a Windows 2003 test box, simple embedded fonts (like Times New Roman 12) rendered completely wrong (wrong spot, and short and squat, almost like the DPI's were crazily wrong).
Note that I've hardcoded the DPI to 240 here b/c I'm using a weird mainframe print driver that forces 240x240. I can discount that driver as the culprit as, if I save the EMF file locally during print, it shows the same layout problems. If I render to PNG or TIFF files, this looks just fine on all my servers using this same code (put .png in place of .emf). Finally, if I use the ABCPDFView project to manually add in a random text box to my PDF, that text also renders wrong in the EMF file. (Side note, if I print the PDF using Acrobat, the text renders just fine)
Update: I left out a useful point for anyone else having this problem. I can work around the problem by setting RenderTextAsText to "0" (see code below). This forces ABCPDF to render the text as polygons and makes the problem go away. This isn't a great solution though, as it greatly increases the size of my EMF files, and those polygons don't render nearly as cleanly in my final print document.
Anyone have any thoughts on the causes of this weird font problem?
private void DoPrintPage(object sender, PrintPageEventArgs e)
{
using (Graphics g = e.Graphics)
{
//... omitted code to determine the rect, used straight from ABC PDF sample
mDoc.Rendering.DotsPerInch = 240 ;
mDoc.Rendering.ColorSpace = "RGB";
mDoc.Rendering.BitsPerChannel = 8;
mDoc.SetInfo(0, "RenderTextAsText", "0");//the magic is right here
byte[] theData = mDoc.Rendering.GetData(".emf");
using (MemoryStream theStream = new MemoryStream(theData))
{
using (Metafile theEMF = new Metafile(theStream))
{
g.DrawImage(theEMF, theRect);
}
}
//... omitted code to move to the next page
}
Try upgrading to the new version of abcpdf 8, it has its own rendering engine based on Gecko and so you can bypass issues like this when abcpdf is using the inbuilt server version of IE for rendering.
I was originally RDPing in with 1920x1080 resolution, by switching to 1024x768 res for RDP, the problem went away. My main program runs as a service, and starting this service from an RDP session w/ 1024x768 fixes it.
I have an email out w/ ABC PDF to see if they can explain this and offer a more elegant solution, but for now this works.
Please note that this is ABC PDF 7, I have no idea if this issue applies to other versions.
Update: ABC PDF support confirmed that its possible the service is caching the display resolution from the person that started the process. They confirmed that they've seen some other weird issues with Remote Desktop and encouraged me to use this 1024x768 workaround and/or start the service remotely.