I'm using a custom font (BebasNeueLight). It looks like this in Font Book:
I've added it to the iOS project in the usual style; copied it into the project added a key in the plist "Fonts provided by application" and added the name of the file (BebasNeueLight.otf).
In my label in Swift I do the following:
label.font = UIFont(name: "BebasNeueLight", size: 24.0)!
Which is the actual Postscript name of the font.
When I run the app I see the custom font is loaded; but it displays the regular style (which I neither added to my project or specified):
Font book screenshot with the 'regular' style:
Has anyone seen this before? I'm guessing there is something 'wrong' with the font itself. I works fine on Android btw.
-- Edit:
I'm using the correct name, I've gotten this name with fontconfig and Swift code for printing font (and it is loading the custom font; just not the correct style..). Output:
❯ fc-scan --format "%{postscriptname}\n" BebasNeueLight.otf
BebasNeueLight
--
The Storyboard also renders the font 'wrong'; I've selected the font with my label (as attributed so you can see the render preview):
But the Storyboard already renders it as the 'regular' type (just as the app):
So I'm thinking it is a problem with the font itself for some reason.
I guess the problem is at font name "BebasNeueLight", put below function at your app delegate and call it:
func printFonts() {
let fontFamilyNames = UIFont.familyNames
for familyName in fontFamilyNames {
print("------------------------------")
print("Font Family Name = [\(familyName)]")
let names = UIFont.fontNames(forFamilyName: familyName)
print("Font Names = [\(names)]")
}
}
then check the name of loaded font family name may be "BebasNeue-Light"
The problem is that "BebasNeueLight" in font file name does not correspond with real font title name. So you need to find you the font name somehow. One of the variants is:
func listFontsNames(){
for family : String in UIFont.familyNames as [String]
{
print("Family : \(family)")
for name in UIFont.fontNames(forFamilyName: family)
{
print("name : \(name)")
}
}
}
Of course you've added font to project and to info.plist?
1.Add font file into project
2.Add a new entry with the key "Fonts provided by application" in plist file
each of your files, add the file name to this array in Fonts provided by application
3.label.font = [UIFont fontWithName:#"BebasNeueLight" size:15];
Swift.
label.font = UIFont(name:"BebasNeueLight", size:15)
you can print all fonts (see below). You can also check if the font exists.
for family in UIFont.familyNames {
print("\(family)")
for name in UIFont.fontNames(forFamilyName: family) {
print(" \(name)") // <- FontName
}
}
copy and paste your font name from log and try to assign:
label.font = UIFont(name: "<PasteYourFontNameHere>", size: 24.0)!
sometimes the font name is different.
Did you setup everything from xcode etc? If not please follow this
If you are using webfont then download.ttf file and drop it into your project . Check mark on copy items if needed
Next add this on info plist
<key>UIAppFonts</key>
<array>
<string>Your fontname.ttf</string>
<string>Bakersfield Bold.ttf</string>
</array>
Now take a look the font family name. Which you will find on font file also. From where you have downloaded you will get there also. Like i added font which ttf file name is : Bakersfield Bold.ttf for this fontname is : Bakersfield-Bold Thats it Happy coding.
if you already done then follow this steps
label.font = UIFont(name: "BebasNeue-Light", size: 24.0)!
May be here you made a mistake on font name.
The latest iOS SDK and Xcode (9.3) fixes this problem, so I guess it was a bug in IOS < 11.3.
Current version in which it works as expected:
❯ xcodebuild -showsdks
iOS SDKs:
iOS 11.3 -sdk iphoneos11.3
The device also needs to be running at least iOS 11.3!
All the other setup (adding font to plist.info, using correct postscript font-name etc) was correct.
Related
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.
I am currently working on an IOS application and i want to add button labels or icon using FontAwesome i have successfully installed cocoapods in my project and now i have no idea of using cocoapods for adding library FontAwesome(More info:-enter link description here) icons in my IOS Application.
I need to know about the procedure of adding FontAwesome using
cocoapods,
and
I need to know if their is another way to add FontAwesome to my project
thanks
There are many ways of using font awesome icons in an iOS application.
You can opt out any one of them according to your understanding and comfort.
Approach 1:
Writing your own logic
Add font awesome files into your compile source and make sure added properly (See the attached pictures)
Keep Unicode string of any font-awesome icon(In the example code I am taking the close icon reference. Its font awesome class and Unicode texts are fa-close and f00d respectively (See example code). In my case, I have a class where I have all font awesome icon string and another class which accept font awesome class string and returns the appropriate Unicode string.
Create an attributed string with that Unicode string and set it to attributedText property (See the example code below).
You can search your desired font awesome string and Unicode here
Code Example
Step1
In this example, I have created an extension which returns the Unicode string.
extension String {
func fontAwesomeString(name: String) -> String {
switch name {
case "fa-close":
return "\u{f00d}"
default: // manage exhaustive case accordingly
}
}
}
Step2
Call above method by passing the appropriate font awesome string.
let iconUnicodeText = String.fontAwesomeString(name: "fa-close")
let iconAttributed = NSMutableAttributedString(string: iconUnicodeText)
self.iConLabel.attributedText = iconAttributed // iConLabel is a control type of UIlabel.
Or if you don't want to organise your source code you can directly create an attributed string with Unicode and set to attributedText property.
Note: You might be required to make changes in above code snippet. As I have written for Swift 4.0
Approach 2:
Using cocoa pods
Once you installed the pod library, you call the appropriate methods shown in the example as below
yourButton.titleLabel?.font = UIFont.fontAwesome(ofSize: 30, style: .brands)
yourButton.setTitle(String.fontAwesomeIcon(name:. gitgub), for : .normal) // you may change icon type with your desired one
If you have not already installed CocoaPods, these are good instructions: https://stackoverflow.com/a/25257238/8534588
Install FontAwesome with CocoaPods:
Open up Podfile which is in the same folder as your .xcodeproj file
Add this line to Podfile to install FontAwesome.swift: pod 'FontAwesome.swift'
Save changes to Podfile
Open up Terminal in the folder that contains Podfile and run the command pod install
How to use FontAwesome icons:
Add import FontAwesome_swift in your code file
Example code:
let image = UIImage.fontAwesomeIcon(name: .checkCircle, style: .solid, textColor: UIColor.black, size: CGSize(width: 40, height: 40))
Use like below:-
Step1 : Add framework like below image
Step 2:Drag and drop all .otf and .swift files into your project
Step 3:import FontAwesome_swift
Step 4: Use below code:-
let imageView = UIImageView(frame: CGRect(x: 80.0, y: 80.0, width: 50, height: 50))
imageView.image = UIImage.fontAwesomeIcon(name: .github, style: .brands, textColor: .black, size: CGSize(width:40,height:40))
self.view.addSubview(imageView)
Result:-
I have done this in Objective C, So hope this would be useful. The procedure will be same but you need to convert the Objective C code to Swift.
So for do this in Objective C,
You can follow the step mentioned in this link to add the FontAwesome manually to your project without using CocoaPod, If you are interested not to use CocoaPod
Manually Add FontAwesome
From that Github project takeout the NSString category class, i.e NSString+FontAwesome
You need to add the fontawesome-webfont.ttf in resource folder as well
NB: For me error was coming after I add NSString Category class mentioned there in the above link, If you are facing the issue like duplicate definition then just rename those enum constants those are not satisfying the variable naming convention. (For me some of the enum constant were using hypen(-) i replaced those with underscore(_)).
I've created an React Native app, targeted mainly at iOS.
I'm using custom fonts, and can see they are successfully integrated into the app via some debug in AppDelegate.m (in XCode):
for (NSString* family in [UIFont familyNames])
{
NSLog(#"%#", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(#" %#", name);
}
}
resulting in:-
MyFontFamily
MyFontFamilyFontOne
MyFontFamilyFontTwo
My issue is accessing the specific fonts in a < Text > element - I always see the same font rendered when using the family or the exact font name, e.g.
<Text style={{fontFamily: 'MyFontFamily'}}>hello</Text>
<Text style={{fontFamily: 'MyFontFamilyFontOne'}}>hello</Text>
<Text style={{fontFamily: 'MyFontFamilyFontTwo'}}>hello</Text>
results in the same font rendered.
Outputting the same in HTML results in the desired outcome, e.g. fonts One and Two are different.
As said by #Yanush verified you have properly linked your fonts. After with custom font you must set the fontFamily, the fontWeight and the fontStyle
Make sure you have linked the fonts correctly.
The correct way of linking fonts in react native is as described:
Create a fonts dir under your project dir, eg: ./assets/fonts
Edit package.json file and add these lines:
"rnpm": {
"assets": [
"./app/assets/fonts"
]
}
Link the fonts: in your project dir run "react-native link"
I am trying to embed truetype font Treubuchet MS in a PCL5 generating program.
But I've stumbled on a problem. To embed and use the the font I should know its typeface, when selecting it for use in the *.pcl file. But I can't find a reference, where fonts and their typefaces(numbers) are described.
To be more precise, I am using the below sequence for selecting Treubuchet MS regular:
esc(s0S esc(s0B esc(s25513T esc(6982X
Explanation:
not italic, not bold, typeface of font, id of font to be loaded to printer.
But my currently selected typeface (25513) is wrong and the font is not sent and loaded to the printer (soft font added in the file).
Could you help me with this?
As far as I can see, the font ID you need is the one supplied when you created, and downloaded, the soft font.
Note that on page 189 of the PCL 5 reference (section 11-5 Soft Font Creation, in case you have a different version of the spec) it says:
Use the Font ID command to designate a unique ID number prior to the
download of a font header. If an existing font is already associated
with this ID, the existing font is deleted upon the download of the
font header.
The Font ID command can be found on p156 of my copy of the spec:
The Font ID command is used to specify an ID number for use in
subsequent font management commands. The ID number of a font can be
used to select the font for printing (refer to “Font Selection by ID”
in Chapter 8). E C *c#D
# = ID number Default = 0 Range = 0 - 32767 The font ID number is used during subsequent soft font downloads, selections or deletions. The
factory default font ID is 0 (if no Font ID command is sent, an ID of
0 is assigned).
So before you download the soft font you should specify the font ID of the font, eg:
esc*c1D
Then download the font. When you want to use the font you downloaded then you select it with:
esc(1X
Still not a PostScript question though :-)
I'm trying to place my custom fonts into Resources/Fonts/MyFontFamily subdirectory, however I'm having problems on how to load them from the code.
In my info.plist I've added:
<key>UIAppFonts</key>
<array>
<string>/Fonts/MyFontFamily/MyFont-Regular.ttf</string>
In the code I do
var font = UIFont.FromName(#"/Fonts/MyFontFamily/MyFont-Regular.ttf", 14);
However the font is null, If I place the font directly in the Resources folder and change info.plist and font path in the method UIFont.FromName accordingly it does load the font. Is it not possible to have custom fonts placed in Resources subdirectory?
Edit: I've tried both with and without "/" at the start of the path.
info.plist
<key>UIAppFonts</key>
<array>
<string>Fonts/MyFontFamily/MyFont-Regular.ttf</string>
Note: Do not include "/" at the beginning of the array string.
Note: This assumes that your fonts are in the Fonts/MyFontFamily subdirectory of your Resources.
Flag your fonts to Always Copy:
Code:
var font = UIFont.FromName(#"MyFont-Regular", 20);
Note: This is the font name as seen in the Font Book
i.e.:
PinyonScript-Regular.ttf
Is opened via:
var font = UIFont.FromName(#"Pinyon Script", 20);
Quick font name check, open the font in Font Book and look at the name of the font in the title bar:
Dont think you need the "Fonts" bit at the start of the path try :
var font = UIFont.FromName(#"MyFont-Regular.ttf", 14);
OR
var font = UIFont.FromName(#"MyFontFamily/MyFont-Regular.ttf", 14);