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).
I have a unique React application that utilizes the Material UI framework for its user interface design. Specifically, I have developed a specialized button component that customizes the default Material UI button and integrates with Redux. Within the ren ...
Using Webpack has been a game-changer for us when it comes to writing isomorphic Javascript. It allows us to seamlessly switch between using npm packages on Node.js and utilizing browser globals during bundling. If I want to include the node-fetch npm pac ...
Just diving into Vue and starting with class-style binding syntax. I'm facing an issue where the CSS classes for header and footer that I've defined are not displaying, even though I've referenced them in the component tags. Can't seem ...
I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...
I am having trouble changing the color of my navigation bar from transparent to black after the user scrolls down. Despite trying various methods and watching tutorials, I can't seem to get it to work. HTML <nav role='navigation' class= ...
Introduction I am seeking guidance on how to correctly set up my tsconfig.json file to ensure only the necessary files are included when running npm run build for my projects. I want to avoid any unnecessary files being imported. Query What steps should ...
When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...
Consider the following array of objects: data = [{x: 1, y: 2, z: 3}, {x: 4, y: 5, z: 6}, {x: 7, y: 8, z: 9}] Is there a way to extract only the x elements from these objects and create an array out of them? For example: x = [1, 4, 7] Can this be achiev ...
Due to my limited JavaScript experience, I am struggling with understanding the event flow. This was written in haste, and further editing may be needed. I am working on creating a stack of cards (Bootstrap cards) along with a load button. To keep it inde ...
I designed a webpage with an iframe at the bottom that I set to be transparent so that overlapped elements are visible. However, I encountered an issue where the links beneath the iframe were not clickable unless I disabled pointer-events for the iframe. ...
Struggling to adapt Valerio Coltrè's Angular login example on GitHub to work with my ServiceStack authentication. Despite appreciating Valerio's implementation of authentication, I am facing challenges as he uses an httpBackend mock and interce ...
After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...
How can I convert a string into an object with error details? const er= {'username': [ErrorDetail(string='A user with that username already exists.', code='unique')], 'email': [ErrorDetail(string='user with thi ...
Is there a way to scale in one direction only? Typically, the scale function will scale the canvas equally in both the x and y directions. But what if I want to scale, for example, a polyline or group of lines only in the x direction without affecting the ...
Currently, I am still in the process of familiarizing myself with Angularjs and actively learning about its functionalities. One issue I have encountered is that when I define an array and loop through it using "ng-repeat," the items within ng-repeat fail ...
I have a specific requirement that involves using two useEffect hooks. First useEffect is used to set the latitude and longitude in the state with an empty dependency array. useEffect(() => { navigator.geolocation.getCurrentPosition(geo = ...
After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...
My three.js project features a 3D object that is meant to be viewed from the front only, as it appears as a single plane and is transparent from the back... Using orbitControls, I have restricted movement of both azimuth and polar angle... To enhance the ...
Having a bit of trouble with my navbar setup. I want to use an image brand with img-fluid so it resizes to fit the div and remains responsive. However, instead of resizing, the image just stretches out the navbar making it huge. Here's my code: ...
I am looking for a way to randomly change the background color of each element However, when I try to implement it in the code below, the background color ends up being transparent: { modules.map((module, index) => ( <div className='carou ...