Tips for integrating a unique font into your PhoneGap project

I've been attempting to incorporate a custom font into my PhoneGap application, trying out two different methods I came across online. Unfortunately, neither of them seem to be effective when using PhoneGap 3 and Xcode 5.

  • First method involves using font-face in CSS:

    @font-face {
           font-family: 'Droid Arabic Kufi';
           src: url('fonts/DroidKufi-Regular.ttf');
         }

body {
     font-family: 'Droid Arabic Kufi';
   }

    The second method entails editing the Xcode info.plist file:

    1. Initially, I placed DroidKufi-Regular.ttf in the project resources folder.

    2. Then, I added a new row in the info.plist file under Fonts provided by application, with the item named DroidKufi-Regular.ttf. But unfortunately, this did not work as well.

    3. In a desperate attempt, I inserted the following line of code in the viewDidLoad method: 

      [UIFont fontWithName:@"Droid Arabic Kufi" size:10.0];
      . Yet, this too failed to produce the desired outcome.

htmlcssxcodecordova

Answer №1

In my application, this solution is effective. The 'fonts' folder is located within the directory that contains the css file.

@font-face {
    font-family: 'grenouille';
    src: url('fonts/grenouille.eot');
    src: local('☺'), url('fonts/grenouille.woff') format('woff'), url('fonts/grenouille.ttf') format('truetype'), url('fonts/grenouille.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: "grenouille";
}

If you find too many font files unnecessary, you can use a website like to generate them.

If issues persist, double-check letter casing, remove spaces from filenames, and try applying a system-installed font family to confirm whether the problem lies with the font or the CSS styling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to eliminate header and footer data while printing a webpage

In my attempt to implement the code displayed below, I am encountering an issue where the header and footer continue to appear on the printed page. Despite numerous attempts with various CSS elements, I have been unsuccessful in removing the header and fo ...

phphtmlcssprinting

Tips for creating a div that covers the entire screen and prevents it from resizing

I am facing an issue with a container having the className "container". When I set the height to 100vh like this: .container{ height:100vh } Whenever I resize my screen, such as with dev-tools, the div also shrinks. How can I prevent this? Is it possi ...

css

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Check out my Tutorial Page! Currently, I am working on a simple tutorial page utilizing bootstrap 3. My goal is to showcase the HTML file content within the well container on the right side of the page. However, I am facing challenges as I do not want to ...

jqueryhtmlcss

Creating an 8-bit grayscale JPEG image using HTML5 and encoding it from a canvas source

Is there a simple method to convert an 8-bit grayscale JPEG from Canvas using client side technologies in a web browser (such as HTML5, canvas, WebGL, and JavaScript)? Are there any pre-made JavaScript libraries available for use, without requiring extens ...

javascripthtmlhtml5-canvasjpegwebgl

``To ensure Google Maps fills the entire height of its parent div, set the

Is there a way to display a Google Map at 100% of the parent div's height? I've noticed that setting the height to 100% makes the map not visible, but if I use a pixel value for the height, the map displays correctly. Are there any tricks or solu ...

htmlcssgoogle-mapsgoogle-maps-api-3maps

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

div with a fixed element inside that is scrollable

Check out this jsfiddle: http://jsfiddle.net/devboell/kjFps/ I am trying to create a div that overflows both horizontally and vertically. Additionally, I need an element that scrolls only horizontally while remaining fixed vertically. Here is an explanat ...

jquerycsshtmlpositioning

How can I improve the smoothness of my CSS transition when resizing background images?

I'm currently working on creating an intro movie for a game and I thought it would be interesting to use CSS animations. However, I've noticed that some parts of the animation appear bumpy and inconsistent. It seems that depending on the transiti ...

jquerycss

Spacing among values returned from the database

Seeking assistance with an issue in my code. I have written a piece of code that displays two columns from a database within a form. Unfortunately, the code is not allowing me to separate the two columns properly in the form. For example, if the name dis ...

phphtml

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

javascriptpythoncssseleniumselenium-webdriver

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...

cssangulartypescriptforms

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

Enhance your HTML5 video by incorporating strategically placed buttons (images) as an overlay

Recently, I embedded a video: <video preload muted autoplay loop id="sty"> <source src="content/1/sty.mp4" type="video/mp4"> </video> To make this video full-width, I made sure to set the CSS properti ...

htmlcsshtml5-video

Is there a method to iterate through an HTML quiz in order to extract text from "label for" with the value of "true"?

I need assistance with extracting all the correct answers from a multiple choice radio button quiz. The correct answers are identified by the attribute value="true" in the HTML code. Is there a way to iterate through and retrieve the text of all the corr ...

javascriptphphtml

Doesn't IE support the use of jQuery.last()?

Here is the code snippet I am currently using: $('script').last().parent().html('kkkk') Unfortunately, I am encountering an error in Internet Explorer when running this code. Any suggestions on how to address this issue would be great ...

jqueryhtmlinternet-explorer

Creating pages or tabs within a table using HTML5 and Angular is a simple and effective way to organize

I have a REST response that returns around 500 records. These records are being displayed in an Angular table. I would like to add customization options for the user, allowing them to choose to display 10/20/30... records per page. Additionally, I want to ...

javascriptangularjshtmlrest

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

javascriptjquerycssanimation

How can I rearrange the button order in a Bootstrap table?

I'm having trouble getting this attribute to work in the table tag data-buttons-order=['paginationSwitch','refresh','toggle','fullscreen','column'] ...

jquerycsstwitter-bootstrap

Using jQuery to Generate an Automatically Updating Timer for Slideshow - Pausing on Mouse Click

My first slideshow with jQuery is up and running, but it's very basic and hard coded. I want to add an automatic scrolling effect every 8 seconds to the next item before looping back to the beginning. I have an idea on how to achieve this, but I want ...

jqueryhtmlcsstimerslider

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number ...

htmlcssbootstrap-5