Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any suggestions or solutions?
P.S. The font in question is Titillium.
It's pretty straightforward - if you're able to forgo support for IE8 and earlier versions, you can skip using them for the glowing effect.
To achieve this, visit and download the @font-face kit provided there. Follow the instructions on how to install and utilize @font-face for your website.
For an outer glow effect, you can make use of the text-shadow property to create a similar look. For example, the following code will give you a 3px blue glow:
text-shadow: 0 0 3px #7FDEFF;
That's it! Keep in mind that older versions like IE8 and below do not support the text-shadow property, so that's something you'll have to accept.
If you want to use the Titillium font on your webpage just like any other text, you'll need to embed the font. There are numerous online services available that can assist with this process. Before embedding the font, be sure to check the font's license to ensure that embedding is permitted, as some fonts do not allow it.
Below is an example of how to embed the font using CSS3:
@font-face{
font-family: 'Titillium';
src: url('Titillium.eot');
src: local('Titillium'), url('Titillium.ttf') format('truetype'), url('Titillium.woff') format('woff'), url('Titillium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
In the above code snippet, you'll notice various formats of the same font being used. This is done to ensure browser compatibility - for example, EOT is supported by Internet Explorer and WOFF is a format that is expected to be widely accepted across all browsers soon. There are several online converters available that can help you convert fonts. Simply search online to find the best one for your needs.
Font embedding is supported in the following browsers:
Below is the glow effect I frequently use in my projects :)
HTML
<span id="glow">Hello World</span>
CSS
#glow{
font-weight:bold;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(73, 167, 219, 0.5), 0 0 30px rgba(92, 214, 255, 0.7), 0 0 75px rgba(92, 214, 255, 0.8);
}
Enhance your text with these techniques:
Create a glowing effect for your font by utilizing the jQuery Text Glow Effect plugin available at this link
Add the Titillium font to your website using CSS:
@font-face {
font-family: Titillium ;
src: url( /location/of/font/Titillium.ttf ) format("truetype");
}
/* Apply the Titillium font like any other */
.Titillium { font-family: Titillium , verdana, helvetica, sans-serif;
}
Consider giving Cufon a try! http://github.com/sorccu/cufon/wiki/usage
One feature I find appealing is its ability to gracefully degrade for users who have disabled JavaScript according to your preferences.
Here's an idea I have:
The second and third points could be simplified by incorporating an image of glowing text (which could be dynamically generated, for example, using PHP).
While it may seem complex, this is just one alternative approach. (To be honest, I also appreciate @Yi Jiang's answer).
On my web app, there is a feature that saves data to local storage and converts it to a JSON object. I'm interested in passing this local storage data to my server using AJAX, so that other clients of the web app can access it. Is there a way to accom ...
Here is the code snippet in question: let myVar = unknown; myVar = 5; console.log((myVar as string) + 5); Upon running this code, it surprisingly outputs 10 instead of what I expected to be 55. Can someone help me understand why? ...
I have encountered the following error and I am unsure of its cause. Can you assist me? ERROR [ExceptionHandler] JwtStrategy requires a secret or key TypeError: JwtStrategy requires a secret or key at new JwtStrategy (C:\Users\wapg2\OneDriv ...
Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...
Currently, I am utilizing a plugin that involves the isotope filter library. By setting the width to 33.33%, my list elements are organized into 3 columns. I am trying to specify the middle column to have side borders. However, whenever I click on the filt ...
I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...
I have created a special promotion page that I want to restrict access to only users who have received a unique code from me via email. To achieve this, I have designed the following form: <form accept-charset="UTF-8" action="promotion.php" method="po ...
app.post('/profile', function(req, res) { // save file if (req.files) { let sampleFile = req.files.sampleFile; sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) { if (err) ...
I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...
I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...
I'm experiencing an issue with the overlapping of the svg and YouTube elements. If you hover your mouse over, just to the right of the svg and click, instead of opening the video, it redirects you back to the previous page. Clicking on the area betw ...
Is there a way to ensure that my Next.js file can run seamlessly on any computer without the need for reinstallation of all modules? In my folder, nextjs-node, I have the following subfolders: components lib public node_modules page style package.json I ...
While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...
My code is server1 and PHP code is server2. These servers are not connected. What issues can arise from this setup? var req = new XMLHttpRequest(); req.open("POST", "http://www.example.com/form/data.php", true); req.setRequestHeader("Content-type", "ap ...
Currently, I am utilizing Node v12 along with Express v4.16.4 and Typescript version 3.8.3 within VSCode. This particular snippet of code has remained unchanged for almost 8 months and is utilized in all our routers. export interface ICustomRequest exten ...
Currently, I am utilizing ag-grid, Angular 7, and implementing a server-side datasource with pagination. In my API setup, I initiate two requests: the first request provides the total number of items in the table, while the second fetches the data for the ...
I am currently attempting to implement a feature where I can drag a div (#drag) within its parent container (#container) using only pure JavaScript. This functionality is specifically required to work on iPad devices only. After writing a script that func ...
Currently, I have a controller making use of http.get, http.push and http.post methods within my AngularJS app. During my learning journey with AngularJS, I've discovered that it's more efficient to place http.get calls in service files. While I ...
I encountered an issue when trying to assign data from a function. The error appears in the console ((in promise) TypeError: Cannot read property '0'), but the data still shows on my application. Here is the code: <template> ...
I'm currently dealing with a form that includes input fields for email and password, along with some additional buttons. Here is the HTML code: <div id="login-form"> <form> <input type="email" placeholder="Email" id="email" name= ...