#@font-face

[josegremarquez]

🎈 ¡Bienvenidos a la fiesta tipográfica!

Hoy vamos a convertirnos en DJ’s de letras: elegiremos fuentes, les pondremos ritmo (tamaño, grosor, estilo) y las lanzaremos a la pista de baile de nuestra web para que todo el mundo baile al ritmo de nuestras palabras. 🎧✨ 🎨 Paso 1: ¿Qué playlist de letras necesito? Imagina que cada fuente es un estilo de música: Open Sans → Pop suavecito, ideal para leer sin esfuerzo. Tangerine → Jazz…

🎈 ¡Bienvenidos a la fiesta tipográfica!

[josegremarquez]

CSS3: Revolucionando el Diseño Web en Alicante y la Comunidad Valenciana

Las Nuevas Reglas: CSS3 se Vuelve Loco CSS3 ha traído consigo una serie de propiedades y características que han revolucionado la forma en que diseñamos y animamos nuestras páginas web. Estas nuevas herramientas nos permiten crear interfaces de usuario más atractivas, interactivas y personalizadas. Exploremos algunas de las propiedades CSS3 más populares y cómo se están utilizando en Alicante y…

CSS3: Revolucionando el Diseño Web en Alicante y la Comunidad Valenciana

[simplemlmsponsoring]

The Ultimate Guide to Web Fonts

Historically, choosing the right font for your email has never been too hard, considering the limited number of web safe fonts to choose from. But things have changed. More and more email designers are pushing the boundaries and embracing the same development techniques that web designers have...

https://simplemlmsponsoring.com/attraction-marketing-formula/email-marketing/the-ultimate-guide-to-web-fonts/

#FontFace, #Import, #Design, #EmailDesign, #FauxBold, #FauxItalic, #HtmlTypography, #OutlookHack, #Typography, #WebFont, #WebFonts, #WebSafeFont #EMAILMARKETING

Simple MLM Sponsoring

[byrdy]

Hello hello, good day ya’ll! Today I am going to write an impromptu tutorial on @font face. Yes, yes I completely understand. That thing is a fucking beast. But even beasts can be defeated... in this case, sort of. Anyway, I went to @octomoosey and she confirmed that the way I found works!

Step 01: Go to any font website and download your desired font. Maybe it’s free, maybe it’s not. Totally up to you. It just has to be in .ttf form.

Step 02: Your font is downloaded and in .ttf form, good. Now it’s time to open up dropbox and upload it. (If you do not have an account, sign up. It is free.)

Step 03: Click on “Share.” Click on “Create a link.” It will give you a generated link. You may copy the entire thing, but you do not need the entire thing. I repeat: you do not need the entire thing! I will explain why in the next step.

Step 04: Now, the CSS code for @font-face is as follows: 

@font-face { font-family: "emulogic"; src: url('https://dl.dropboxusercontent.com/s/owt7yx1x3tqae0j/emulogic.TTF'); }

What you will want to change is “FONTNAME” and “THISPART”

@font-face { font-family: "FONTNAME"; src: url('https://dl.dropboxusercontent.com/s/THISPART.TTF'); }

The reason why it’s so important that you don’t insert the entire link you copied from dropbox is because, in the generated link, it shows up as “dropbox.com.” What you really need is “dl.dropboxusercontent.com.” I don’t know why, but it will not work if you just slap your entire generated link into the URL part. Below, I have bolded the part that you want to transfer into the code that I have provided above.

https://www.dropbox.com/s/owt7yx1x3tqae0j/emulogic.ttf?dl=0

Step 05: You’ve got that? Awesome. Now go to your blog and click on “Edit Theme,” then click on “Custom Theme.” Go all the way down to “<style type=“text/css”>--”--under there, paste your code.

Step 06: In order for your font to show up on your theme, you must scroll down to the section code--for this example, I will use my description code. The code is: “font-family: ‘YOURFONT’;” It’s also important to pay attention to the size of that font, too. Your font may come out to be really small or really big--emulogic did, so I ended up having to shrink it to 8px. The code for font size is: “font-size: #px;”. Change the # to any number. 

Step 07: The third step to making sure that the font shows up is to go way down to “</style><body>” and insert the div for the section of your theme you put your font in. For me, I put my font under “.desc” so my div will be “<div class=“desc”>”. After I put all of the stuff I want in there, I closed the section with “</div>”. 

All I can say is--if you don’t close your div, your theme will fuck up. Computers are smart, but they are really dumb. That’s probably the most frustrating thing about HTML. You have to be very careful with where you place things and how. Anyway--before I get too far into this rant, TADA! You hopefully have a brand new font on your blog! If you have any questions, don’t hesitate to poke me. I will do my best to answer them even though my knowledge with HTML is still pretty limited. 

My description:

[aocchan]

Hosting fonts and using @font-face

This guide will show you how to add a font to a website/blog so that it can be displayed even without having that font installed on your PC. 

1) Download your font from http://www.dafont.com/ and extract the .zip file in a folder

2) Go to http://www.fontsquirrel.com/tools/webfont-generator

3) Check “optimal” and the square box at the bottom

4) Click “upload fonts”, go to the previously extracted files from dafont.com and select the one ending in .otf or .ttf

5) Click “download your kit” and once again extract the .zip file in a folder

6) Go to https://drive.google.com/ and create a new folder. Make sure it’s set to “Public” in the sharing settings. 

7) Upload these files downloaded from FontSquirrel: .woff, .woff2, .tff or.otf, .svg, .eot 

8) Among the files downloaded from FontSquirrel find the one named sylesheet.css, open it and copy it. 

9) Paste the code to your CSS. It should look something like this:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 4, 2015 */

@font-face {    font-family: 'pixelmixregular';    src: url('pixelmix-webfont.eot');    src: url('pixelmix-webfont.eot?#iefix') format('embedded-opentype'),         url('pixelmix-webfont.woff2') format('woff2'),         url('pixelmix-webfont.woff') format('woff'),         url('pixelmix-webfont.ttf') format('truetype'),         url('pixelmix-webfont.svg#pixelmixregular') format('svg');    font-weight: normal;    font-style: normal;

}

Note: to create this code I’ve used the font pixelmixregular. You should see your font’s name there.

10) Copy this somewhere where you can edit it (Notepad for example):

http://googledrive.com/host/XXXXXXXXX/

11) Now we’re going to replace the XXXXXXXXX part. Go to your Google Drive folder. In the adress bar the link should be similar to this: https://drive.google.com/drive/u/0/folders/XXXXXXXXXXXXXXX. There should be a code instead of the XXX. That’s what you should replace the XXX with in the googledrive link above. 

12) Now back to the @font-face CSS. See the bold area in the code? Attach your newly created link BEFORE them, so that it looks like this: 

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 4, 2015 */

@font-face {   font-family: 'pixelmixregular';   src: url('http://googledrive.com/host/XXXXXXXXX/pixelmix-webfont.eot');   src: url('http://googledrive.com/host/XXXXXXXXX/pixelmix-webfont.eot?#iefix') format('embedded-opentype'),        url('http://googledrive.com/host/XXXXXXXXX/pixelmix-webfont.woff2') format('woff2'),        url('http://googledrive.com/host/XXXXXXXXX/pixelmix-webfont.woff') format('woff'),        url('http://googledrive.com/host/XXXXXXXXX/pixelmix-webfont.ttf') format('truetype'),        url('http://googledrive.com/host/XXXXXXXXX/pixelmix-webfont.svg#pixelmixregular') format('svg');   font-weight: normal;   font-style: normal;

}

13) And now on to the bold part of the CSS code! Replace it with the exact name of the files in your Google Drive folder. Basically we’ve created a link that leads to the hosted font files. When someone visits your website, they are able to correctly display your font because their browser goes search for it where you have hosted it. Thus they do not need to have the font installed to display it.

For questions and such just drop me a message on my tumblr! 

[condensed-extended]

Endless thanks to the brilliant Cody Pumper for being my spirit guide during Thesis. 

[typorno]

A showcase of the best typefaces from the Google web fonts directory.

[webcreatiiive]