Tips for incorporating web fonts into designMode

I am currently working with a text editor that has the ability to use designMode along with an <iframe>. My goal is to change the font to a Google Web font. Below is the JavaScript code I am using:

function setFont(fontName, boolValue, fontText) {
    editor.execCommand("styleWithCSS", true, null);
    editor.execCommand(fontName, boolValue, fontText);
    editor.focus();
}

This is the HTML for selecting fonts:

<select onchange="if (this.selectedIndex > 0) {setFont('fontName', false, this.options[this.selectedIndex].text);}">
            <option selected>Font</option>
            <option>Arial</option>
            <option>Times New Roman</option>
            <option>Courier</option>
            <option>Consolas</option>
            <option>Calibri</option>
            <option>Molle</option>
        </select>

Within the <iframe> file, you will find this CSS link:

<link href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'>

My attempt to change the font of the text through CSS includes:

span[style="font-family: Molle"] {
    font-family: 'Molle', cursive;     
}

Unfortunately, this solution does not work as intended. Keep in mind that it only needs to work in Google Chrome.

javascripthtmlcssiframeexeccommand

Answer №1

You are only loading the italic version of the font, which means it will only display if you specifically set it to italic in the style of the span.

font-family:'Molle',sans-serif; font-style:italic;

Furthermore, if you have the ability to make changes to the HTML, avoid using inline styles followed by attempts to override them with a stylesheet using the style attribute for a selector. This practice not only looks messy and ineffective but also won't achieve the desired result as inline styles take precedence over stylesheets. So, you can either apply the above code directly as an inline style for the span or assign a class to the span and use it in the stylesheet for better control.

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

Arranging divs using inline-block display. How to adjust the heights consecutively?

After much searching and attempting, I am still unable to achieve a simple task. My goal is to apply display inline-block to some divs while aligning them in a row, similar to the image below: https://i.sstatic.net/iLhLS.png The issue arises when number ...

javascripthtmlcssheight

Verify your identity using Google reCaptcha during Passport authentication

I am currently working on integrating google reCaptcha into my signup form's back-end, which already includes passport authentication. The code I have so far looks like this: app.get('/signup', function(req, res) { // render the ...

javascriptnode.jsexpresspassport.jsrecaptcha

What is the best way to manage font size on an HTML webpage?

In a scenario where I specify font-size = 25px along with a specific font-family, my intention is to display a character that is exactly 25px on the HTML page. However, the rendered character's size may be slightly different, such as 27px or another v ...

htmltypesetting

Angular is unable to successfully send a post request to Node

Whenever I click on the submit button on the frontend, it triggers the upload() function. This is how it is implemented in my app.html: <div class="row" style="padding:10px;"> <button type="submit" class="btn btn-primary" style="margin ...

javascriptnode.jsangulartypescript

What is the reason behind $(this).text() returning an empty string when clicking on an li element?

Can anyone explain why clicking on this element returns a blank string ""? function saveSelection() { var selectedValue = $(this).text(); // The value here is "" } This pertains to: <ul> <li data-bind="item" onclick="saveSelection();"> ...

javascriptjqueryonclick

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

I am currently utilizing ngModel for a textarea, and I would like to be able to enable and disable the textarea based on a certain condition. Even though I have bound it correctly and the value is changing to [attr.disabled]="false", the textarea remains d ...

javascripthtmlangulartextareainput-field

Encountering NaN while trying to retrieve the duration in JavaScript

I'm having an issue retrieving the duration of an mp4 video file when the HTML document loads. Here's my code: (function ($, root, undefined) { $(function () { 'use strict'; $(document).ready(function() { ...

javascriptjquery

JS client-side form validation involves communicating with the server to verify user input

I currently have an HTML form that is being validated on the client side. Below is a snippet of the code: <form id='myForm' onsubmit='return myFormValidation()'> ... </form> Now, I want to incorporate server-side valida ...

javascriptjqueryhtml

Combining and forming a distinctive case-sensitive array in JavaScript

Explaining a complex scenario, I have one object or array and one array. My goal is to compare selectedmodel values with mappedmodels. If the value (case insensitive) matches any key in the object, I need to fetch all associated values and push them into t ...

javascriptangulartypescriptunderscore.js

Seeking assistance to transfer div elements into a different div post an onclick event

I have a container that contains four separate divs. My goal is to append the remaining three divs to another specific div after clicking on one of them. Does anyone know how I can achieve this? <!DOCTYPE html> <html lang="en"> < ...

javascriptjqueryhtml

Issue with alignment on the printed version of an HTML document

While attempting to print an auto-generated HTML page through my Thermal POS printer, I encountered a large left margin issue. The application is developed using PyQt5, and I had to resort to a python script to generate the HTML code. Unfortunately, in the ...

htmlcssprintingpyqt5

The simple-ssh Node has successfully completed its operations without encountering any errors

I'm having trouble establishing a connection to an Ubuntu EC2 instance using the Node library called simple-ssh. Below is the code snippet I'm using: const SSH = require('simple-ssh') const fs = require('fs') var ssh = new ...

javascriptnode.jsssh

Transforming jQuery into Angular - Press Button to update choices in Dropdown List

I am looking to integrate some AngularJS features into a website that currently utilizes jQuery. Here is the issue I am facing: With jQuery, clicking a button triggers a dropdown item change. Please refer to the jsfiddle below for an example: $('# ...

javascriptjqueryhtmlangularjsforms

Handling Asynchronous API Requests with AngularJS

I am facing an issue with displaying data from API in my files foo.js and foo.html. While fetching information asynchronously in foo.js, I store it in an object that should be accessible in foo.html. However, despite receiving the data correctly, I am una ...

javascriptangularjsasynchronousangularjs-ng-repeat

Create a visually appealing layout with two images positioned side by side using Bootstrap

Currently, I am working with a code snippet that displays two images, each approximately 350px wide. These images are being shown in a sidebar that is set at 400px wide on desktop and tablet screens (col-lg, col-md, col-sm), but expands to 100% width on a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Creating dual graphs simultaneously in Rickshaw

Can two graphs with different Y axes be plotted together? I have data on page views organized in a stacked area chart by referrer, and I would like to overlay a line graph depicting the number of actions over time. Although I already have both graphs ind ...

javascriptd3.jsrickshaw

Avoid having two DIVS appear simultaneously in IE for half a second upon page load

I'm encountering an issue with my HTML and jQuery code. Here is what I have: <div id="block1"> some text </div> <div id="block2"> some more text </div> Along with the following piece of jQuery code: jQuery(document).ready(fu ...

jqueryhtmlcss

Create a border around the text using a strokeoutline

I'm attempting to apply an outline to text using CSS. The issue I'm facing is that the shadow doesn't work well for perfectly stroked text. Is there a way to achieve this with just CSS? Below is the code snippet I am currently using: . ...

htmlcss

Array Not Receiving Excel Data

In my current project, I am dealing with a basic array structure, which can be seen in the visual representation below https://i.sstatic.net/gNbXa.png My goal is to extract the office codes contained in this array. To accomplish this task, I have opted t ...

javascriptarraysexceljs

Modify the values within all deeply nested objects using Immutable.js

The reducer code snippet given below illustrates the structure: import {ADD_TASK, EDIT_TASK, CHECK_TASK, CHECK_ALL_TASK} from '../constants'; import {OrderedMap, Record} from 'immutable'; const TaskRecord = Record({ id: null, ...

javascriptreactjsreact-reduximmutable.js